視口大小與響應式中斷點測試工具

視口是網頁可以繪製的區域——也就是你的瀏覽器視窗扣除分頁、網址列和捲軸後的範圍。這也是為什麼它幾乎總是比你的螢幕解析度小：螢幕是整個面板，而視口只是頁面可以使用的那一部分。它是以 CSS 像素（版面單位，而非實體點）來衡量——高密度的「Retina」顯示器會在每個 CSS 像素中塞入兩到三個實體像素，使文字看起來更銳利，而 window.devicePixelRatio 則會回報這個倍數。

這個工具會在每次調整大小與方向改變時讀取 window.innerWidth 和 window.innerHeight，以及來自 documentElement.clientWidth/clientHeight 的版面視口、你的裝置像素比與螢幕方向。中斷點是指版面發生變化時的視口寬度——欄位堆疊、選單收合、文字大小改變——而像 Tailwind CSS 這類框架就會從一組具名寬度開始套用樣式。下方的參考表格會標示出你目前寬度所落入的範圍，而可拖曳的測試面板則會回報其自身寬度所落入的中斷點，讓你不必調整整個視窗大小，就能預覽元件效果。一切都在本機執行，不會上傳任何資料。

如果數字看起來不對，代表面板解析度和頁面所看到的視口之間，還有幾個因素會產生影響。瀏覽器的介面元件（工具列等）和捲軸會減少可用區域，頁面縮放會縮小 CSS 像素的數量——因此 innerWidth 會下降，即使視窗本身沒有移動——作業系統的顯示縮放同樣會縮小 CSS 像素數量，這也是為什麼兩台相同的螢幕可能會回報不同的大小。在手機上，meta viewport 標籤 <meta name="viewport" content="width=device-width, initial-scale=1"> 會讓頁面以裝置寬度呈現，而不是偽造成約 980px 寬的桌面版面，因此在 DPR 3 下、390 像素寬的視口，會對應到約 1170 個實體像素寬的面板。若要查看螢幕的完整物理解析度與像素密度，請使用 What Is My Screen Size 與 Screen Resolution Test 這兩個工具。

常見的響應式中斷點