我的視窗大小是多少
你的視口大小
— × —
CSS 像素（布局視口）
调整窗口大小或旋轉裝置即可實時查看數值变化。不會上傳任何内容。
使用方法
- 開啟頁面 - 您的視窗尺寸以寬度 × 高度顯示在頂部。
- 調整瀏覽器視窗大小並觀看數字即時更新。
- 按一下「複製」將視窗尺寸貼上到錯誤報告或 CSS 斷點註解中。
常見問题
我的視窗大小是多少？
您的視窗大小為 window.innerWidth × window.innerHeight — 頁面呈現的瀏覽器內容區域的 CSS 像素尺寸。它不包括佈局視窗之外的工具列、選項卡和捲軸。
視口和螢幕解析度有什麼差別？
螢幕解析度是整個顯示器的尺寸。視窗只是瀏覽器視窗內的可見頁面區域 - 通常較小。開發人員使用視窗進行媒體查詢和佈局。
內窗和外窗尺寸是多少？
内部尺寸是视口（内容区域）。外部尺寸包括瀏覽器鑲邊——標籤、網址列和視窗框架。两者都列在详细信息面板中。
為什麼 CSS 像素與物理像素不同？
裝置像素比 (DPR) 可縮放 HiDPI 螢幕上的 CSS 像素。視窗以 CSS 像素為單位；乘以顯示器上的實體像素的 DPR。
行動瀏覽器 chrome 會影響視窗嗎？
是的。在手機上顯示或隱藏網址列會更改內部高度。旋轉裝置或捲動以查看視窗變化 - 此頁面會在調整大小和方向變更時更新。
是否有資料發送到伺服器？
不會。尺寸是從本機視窗 API 讀取的。沒有上傳任何內容。
介紹
我的視窗大小是多少 顯示瀏覽器佈局視窗的即時寬度和高度（以 CSS 像素為單位）——這些數字對於響應式設計、媒體查詢和「為什麼這個斷點看起來錯誤？」偵錯很重要。
當標籤、工具列或分割畫面縮小內容區域時，視窗就會小於螢幕解析度。此頁面追蹤 內部 尺寸並在您調整大小時更新，因此您始終可以看到 CSS 現在看到的內容。
該工具測量什麼
| 欄位 | 說明 |
|---|---|
| 視窗（內部） | window.innerWidth×innerHeight— 佈局視口 |
| 窗戶（外） | 完整的瀏覽器窗口，包括 Chrome |
| 螢幕解析度 | 從screen.width×height開始完整顯示 |
| 裝置像素比 | HiDPI / Retina 的比例因子 |
常見用例
- 響應式偵錯 — 確認哪個斷點在目前視窗寬度下處於作用中狀態。
- 錯誤報告 — 當佈局在特定尺寸中斷時，貼上準確的視口尺寸。
- iframe 和嵌入大小 - 嵌套內容時驗證父視口。
- 行動模擬 — 比較真實設備視窗與桌面開發工具預設。
最佳實踐
- 慢慢調整大小並觀察標題更新——這就是 CSS 媒體查詢使用的大小。
- 記錄 內部視窗 的佈局錯誤，而不是螢幕解析度 - 請參閱what is my screen resolution以了解顯示器。
- 當影像看起來模糊或太銳利時，與what is my device pixel ratio結合使用。
- 對於完整環境，請打開device info。