画面解像度とViewport

画面解像度はブラウザーが公開するScreen全体の幅と高さです。Viewportは現在のWebページを表示できるブラウザー内部領域の幅と高さで、Tab BarやWindow枠などを除いた値です。

NetKarteでの取得方法

NetKarteのデバイスカードで「画面解像度」と「Viewport」を見比べます。レイアウトが崩れる幅を調べるときは、問題が出るウィンドウ幅にして再診断し、Viewportの値を確認してください。

画面解像度にはwindow.screen.widthとheight、Viewportにはwindow.innerWidthとinnerHeightを使用し、CSS Pixel単位で表示します。Window Sizeやデバイスの向きによってViewportは変わります。

結果の読み方

1920 × 1080 pxのScreenでも、ブラウザーを半分の幅で開けばViewportは小さくなります。MobileではAddress Bar、Zoom、画面回転などにより値が変わることがあります。

誤解されやすい点

表示値は必ずしもPanelの物理Pixel数ではありません。OS ScaleやDPRによりCSS Pixelと物理Pixelは異なります。Screen SizeだけでDevice Modelを確定することもできません。

レイアウトの問題を調べる手順

1. ブラウザーのウィンドウを問題が出る幅にします。
2. 再診断してViewportの幅・高さを確認します。NetKarteは取得時点の値を表示し、リサイズへ常時追従しません。
3. 画面解像度とDPRも合わせて読みます。

例えば画面が1920pxでも、ページ表示領域が768pxなら、レイアウト検討で基準にするのは主に後者です。これは説明用の例です。スマートフォンのピンチズームで見える範囲と、ここで測るレイアウトViewportも常に同じではありません。物理インチ数や端末型番はこの表示だけでは分かりません。