---
tags: javascript
---
# 檢測螢幕、視窗、網頁的寬高
###### by Luke

開發人員工具 主控台檢測螢幕、視窗、網頁的寬高

// 檢測螢幕尺寸
console.log("螢幕寬度 (screen.width): " + screen.width);
console.log("螢幕高度 (screen.height): " + screen.height);

// 檢測螢幕可用尺寸（不含工具列）
console.log("螢幕可用寬度 (screen.availWidth): " + screen.availWidth);
console.log("螢幕可用高度 (screen.availHeight): " + screen.availHeight);

// 檢測視窗外部尺寸（含瀏覽器邊框、視窗標題列、網址列等）
console.log("視窗外部寬度 (window.outerWidth): " + window.outerWidth);
console.log("視窗外部高度 (window.outerHeight): " + window.outerHeight);

// 檢測視窗內部尺寸（含滾動條）
console.log("視窗內部寬度（含滾動條） (window.innerWidth): " + window.innerWidth);
console.log("視窗內部高度（含滾動條） (window.innerHeight): " + window.innerHeight);

// 檢測視窗內部尺寸（不含滾動條）
console.log("視窗內部寬度（不含滾動條） (document.documentElement.clientWidth): " + document.documentElement.clientWidth);
console.log("視窗內部高度（不含滾動條） (document.documentElement.clientHeight): " + document.documentElement.clientHeight);

// 檢測網頁實際內容尺寸（不含滾動條）
console.log("網頁實際內容寬度（不含滾動條） (document.documentElement.scrollWidth): " + document.documentElement.scrollWidth);
console.log("網頁實際內容高度（不含滾動條） (document.documentElement.scrollHeight): " + document.documentElement.scrollHeight);

:::info
基本：螢幕高度 - 117px
(Chrome 瀏覽器邊框、視窗標題列、網址列高度) 77px
(工具列高度) 40px

有開書籤列：螢幕高度 - 149px
(Chrome 瀏覽器邊框、視窗標題列、網址列、書籤列高度) 109px
(工具列高度) 40px
:::

:::info
瀏覽器內容高度
1024 * ~~768~~...619
1280 * ~~1024~~...875
1280 * ~~720~~...571
1366 * ~~768~~...619
1440 * ~~900~~...751
1536 * ~~864~~...715
1600 * ~~900~~...751
1920 * ~~1080~~...931
2560 * ~~1440~~...1291
:::