視口大小與響應式中斷點測試工具
看看你的瀏覽器視窗對網頁來說到底有多大。這個工具會以 CSS 像素讀取你的視口寬度與高度、裝置像素比與螢幕方向，並即時顯示目前尺寸落在哪一個響應式中斷點範圍內。調整視窗大小，所有數值都會立即更新。
調整瀏覽器視窗大小，觀察這些數值即時更新。
Tailwind CSS 中斷點
調整大小時，你的視口所在的範圍會被標示出來。
| 前綴 | 最小寬度 | 套用範圍 |
|---|---|---|
| base | 0px | 0 – 639px |
| sm | 640px | 640 – 767px |
| md | 768px | 768 – 1023px |
| lg | 1024px | 1024 – 1279px |
| xl | 1280px | 1280 – 1535px |
| 2xl | 1536px | 1536px+ |
裝置類別
可調整大小的測試面板
拖曳右下角來調整此面板的大小。它會回報自身的尺寸，以及該寬度會落在哪一個中斷點——是快速檢測響應式效果的好方法。
常見裝置視口尺寸
以下為縱向 CSS 像素視口的大致參考值——實際數值會因瀏覽器與作業系統而異。
| 裝置 | 視口（CSS px） | DPR |
|---|---|---|
| iPhone SE | 375 × 667 | 2× |
| iPhone 15 / 14 Pro | 393 × 852 | 3× |
| Pixel 8 | 412 × 915 | 2.6× |
| iPad mini | 768 × 1024 | 2× |
| iPad Pro 11" | 834 × 1194 | 2× |
| Surface Pro | 912 × 1368 | 2× |
| Laptop (720p) | 1280 × 720 | 1× |
| Laptop (1080p) | 1366 × 768 | 1× |
| Desktop (1080p) | 1920 × 1080 | 1× |
什麼是視口
視口是網頁可以繪製內容的可見區域——也就是瀏覽器視窗中的內容區域，不包含分頁列、網址列或書籤列。這也是為什麼視口幾乎總是比你的螢幕解析度小：螢幕是整片面板，而視口只是頁面實際可用的那一部分。window.innerWidth 與 window.innerHeight 會以 CSS 像素回報這個區域，而 documentElement.clientWidth/clientHeight 則回報版面視口（同一區域，但在出現傳統捲軸時會扣除其寬度）。由於視口會在你調整大小、分割畫面或旋轉裝置的瞬間立即改變，這正是響應式版面真正回應的數值。
CSS 像素、裝置像素與 devicePixelRatio
CSS 像素是一個版面單位，並非面板上的實體光點。在標準顯示器上，一個 CSS 像素對應一個實體像素，但高密度的「Retina」螢幕會將兩到三個實體像素塞進每一個 CSS 像素，讓文字看起來更銳利。window.devicePixelRatio 會告訴你這個倍數：數值為 2 表示寬度 1440 CSS 像素的視口，實際是以 2880 個實體像素繪製而成。網頁是以 CSS 像素排版的，所以一支回報視口寬度為 390 像素、DPR 為 3 的手機，其實體面板大約有 1170 像素寬。若要查看螢幕完整的實體解析度與像素密度，可使用「我的螢幕尺寸」與「螢幕解析度測試」工具。
響應式中斷點
中斷點是版面會發生變化的特定視口寬度——欄位會堆疊、選單會收合、字體大小會調整。CSS 媒體查詢以及 Tailwind CSS 等工具框架會定義一組固定命名的寬度，並從該寬度開始向上套用樣式。Tailwind 的預設值為 sm 640px、md 768px、lg 1024px、xl 1280px、2xl 1536px；低於 640px 則屬於未加前綴的 base 範圍。下方的參考表會在你調整大小時標示目前所在的範圍，而可拖曳的測試面板則會回報其自身寬度會落在哪一個中斷點——不必調整整個視窗，就能快速預覽元件在不同尺寸下的表現。
為什麼 innerWidth 會與螢幕寬度不同
在你面板的解析度與頁面實際看到的視口之間，還隔著幾層因素。瀏覽器外框（分頁、工具列，以及可見的捲軸）會從可用區域中扣除。頁面縮放也會影響它：放大會減少能容納的 CSS 像素數量，因此即使視窗沒有移動，innerWidth 也會下降，同時也會微調 devicePixelRatio。在行動裝置上，viewport 中繼標籤——<meta name="viewport" content="width=device-width, initial-scale=1">——會告訴瀏覽器將版面視口設為裝置本身的寬度，而不是假裝成大約 980px 寬的桌面裝置，這也是為什麼響應式網站需要它。作業系統的顯示縮放同樣會改變 CSS 像素數量，這也是為什麼兩台完全相同的螢幕可能回報不同的視口大小。