螢幕解析度與Viewport

螢幕解析度是瀏覽器公開的整個Screen寬高；Viewport是目前網頁可使用的瀏覽器內部區域，不含視窗邊框等介面。

NetKarte如何取得

在NetKarte的裝置卡片中對照「螢幕解析度」與「Viewport」。排查版面問題時，將視窗調至出現問題的寬度，重新診斷後查看Viewport的值。

Screen使用window.screen.width與height，Viewport使用window.innerWidth與innerHeight，以CSS像素顯示。視窗大小與方向會改變Viewport。

如何理解結果

即使Screen為1920 × 1080 px，瀏覽器半螢幕顯示時Viewport也會較小。行動裝置還會受網址列、縮放與旋轉影響。

容易誤解之處

顯示值不一定是面板物理像素數，OS縮放與DPR會造成差異，也不能只憑Screen大小確定裝置型號。

調查版面問題

1. 將瀏覽器調到出現問題的寬度。
2. 重新診斷查看Viewport寬高。NetKarte顯示擷取時的值，不持續追蹤視窗調整。
3. 結合螢幕尺寸及DPR閱讀。

例如螢幕為1920px而頁面區域為768px，版面調查主要關注後者。這是說明用範例。手機雙指縮放後的可見區域也不一定等於此版面Viewport。不能據此確定實體英寸或機型。