屏幕分辨率与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。不能据此确定物理英寸或机型。