即時偵測

Viewport Size 瀏覽器尺寸檢查

視窗縮放時自動更新所有資料，快速確認目前響應式斷點與可用 CSS Media Query。

目前 Viewport

innerWidth
innerHeight
outerWidth
outerHeight
Screen Width
Screen Height
Device Pixel Ratio
Orientation
Color Depth

裝置級距

MobileTabletLaptopDesktopWide

CSS Media Query

響應式測試提示
  • 桌面瀏覽器可拖曳視窗邊界觀察數值。
  • 開發者工具的裝置模擬會改變 CSS Viewport。
  • 手機網址列展開或收合時，高度可能持續變化。
  • 請以內容自然斷裂的位置設定 breakpoint。


Viewport、Screen 與響應式斷點
Viewport 是瀏覽器提供給網頁排版的可視區域，CSS 的 vw、媒體查詢與許多版面計算都以它為基準。Screen 則是作業系統回報的整個顯示器 CSS 尺寸，即使瀏覽器只佔半個畫面也不會等於目前 Viewport。
裝置名稱只是一種方便理解的區間標籤，不應成為設計唯一依據。更可靠的做法是先建立彈性版面，再於內容開始擁擠、換行或留白過多時加入 breakpoint。DPR 影響圖片清晰度，卻不會直接改變 CSS 版面寬度。
常見寬度分類
本工具以 640、768、1024、1440px 作為參考界線，依序顯示 Mobile、Tablet、Laptop、Desktop 與 Wide Screen。實際專案可依設計系統調整，不必追逐每款裝置。
常見問題
Viewport 是什麼？
它是網頁目前可排版與顯示的 CSS 像素區域，通常使用 innerWidth 與 innerHeight 觀察。
innerWidth 和 outerWidth 差在哪裡？
innerWidth 代表內容 Viewport；outerWidth 還包含瀏覽器視窗邊框與側欄。
Screen Width 為什麼比較大？
Screen 代表整個螢幕，而瀏覽器可能只佔其中一部分。
DPR 會改變 Media Query 嗎？
一般寬度查詢使用 CSS 像素，DPR 主要影響 CSS 像素與實體像素的比例。
手機高度為什麼會改變？
行動瀏覽器工具列顯示與隱藏會改變可視區高度，動態 viewport 單位可處理部分情境。