視口尺寸檢查器
你的視口大小
— × —
CSS 像素（布局視口）
调整窗口大小或旋轉裝置即可實時查看數值变化。不會上傳任何内容。
使用方法
- 開啟頁面 — 目前視窗的寬度和高度以 CSS 像素顯示在頂部。
- 調整瀏覽器視窗大小或旋轉裝置並觀看數字立即更新。
- 使用詳細資訊卡可以比較視口（內部）、視窗（外部）和全螢幕解析度。
常見問题
我的視窗大小是多少？
頂部的大值是您的視窗 - window.innerWidth × window.innerHeight（以 CSS 像素為單位）。這是頁面內容可用的區域，不包括瀏覽器工具列和捲軸鑲邊。
視窗和螢幕尺寸有什麼差別？
螢幕尺寸（screen.width × screen.height）是整個顯示器。視口只是瀏覽器顯示頁面的部分。在桌面上，由於工具列的存在，視口較小；在行動裝置上，當網址列可見時，它也會縮小。
為什麼我的視窗與 CSS 斷點不符？
CSS 寬度媒體查詢遵循佈局視窗（此處顯示的內部寬度），而不是螢幕解析度。如果斷點似乎關閉，請將其與內部寬度值進行比較，而不是與顯示器宣傳的解析度進行比較。
什麼是內部尺寸和外部尺寸？
內部寬度/高度是內容視窗。外部寬度/高度是整個瀏覽器窗口，包括工具列和邊框。詳細資訊卡顯示了兩者，以便您可以了解瀏覽器 UI 消耗了多少空間。
為什麼我的移動視窗會不斷變化？
在手機上，瀏覽器網址列會在您捲動時隱藏和顯示，這會改變可用高度。這是正常的，這就是為什麼此檢查器會在調整大小和方向變更時即時更新值的原因。
是否有資料發送到伺服器？
不會。所有測量結果均來自瀏覽器中的視窗和螢幕屬性，並在本機顯示。沒有上傳任何內容。
介紹
視窗大小檢查器即時顯示瀏覽器內容區域的確切大小。標題報告window.innerWidth × window.innerHeight— 您的佈局實際回應的 CSS 像素尺寸 — 並且這些值會在您調整視窗大小或旋轉裝置時立即更新。
對於響應式設計，視口是最重要的數字。媒體查詢、流體網格和斷點錯誤都取決於內部尺寸，而不是顯示器宣傳的解析度。該工具將該數字放在您無需打開開發人員工具即可讀取的位置。
該工具測量什麼
| 欄位 | Source | 這意味著什麼 |
|---|---|---|
| 視窗（內部） | window.innerWidth/Height |
CSS 看到的內容區域－斷點驅動程式。 |
| 窗戶（外） | window.outerWidth/Height |
整個瀏覽器窗口，包括 Chrome。 |
| 螢幕解析度 | screen.width/Height |
完整顯示尺寸（以 CSS 像素為單位）。 |
| 裝置像素比 | window.devicePixelRatio |
物理到 CSS 像素乘數。 |
| 方向 | screen.orientation |
報告時為縱向或橫向。 |
視窗、螢幕、視窗
這三者很容易混淆：
- 螢幕是整個物理顯示器。
- **窗口（外部）**是瀏覽器窗口，如果不最大化，它可能比螢幕小。
- **視窗（內部）**是視窗中顯示頁面的部分，位於工具列和捲軸之後。
CSS@media (max-width: …)規則遵循 內部 值，這就是此檢查器以其領先的原因。
常見用例
- 偵錯斷點 — 當佈局以意外大小中斷時確認確切的內部寬度。
- 真實裝置上的響應式品質檢查 - 讀取手機或平板電腦上的即時視口，包括網址列如何影響高度。
- 捕獲重現步驟 - 在錯誤報告中記錄精確的視口而不是猜測。
- 設計審查 — 根據您的實際內容區域驗證合成的目標寬度。
最佳實踐
- 在討論 CSS 斷點時，始終引用 內部 寬度，而不是螢幕解析度。
- 在真實設備上進行測試：移動視窗隨著網址列隱藏而變化，模擬器並不總是複製這一點。
- 將此與device pixel ratio checker結合起來以推斷大小和密度，並與device info結合以獲得完整的環境快照。