设备像素比(device pixel ratio, DPR)、设备的逻辑宽度和物理宽度、CSS像素(逻辑像素)和物理像素

设置了width=device-width后,iPhone 7 Plus的浏览器执行alert(document.body.clientWidth);显示的值是398,但是iPhone 7 Plus屏幕的分辨率是1920 x 1080像素分辨率,为什么不是显示1920呢?

当你在 iPhone 7 Plus 上使用 width=device-width 并执行 alert(document.body.clientWidth) 显示值为 398 时,这个值并不是显示的设备屏幕分辨率(1920 x 1080 像素),而是与设备的物理像素密度设备像素比(device pixel ratio相关的值。

设备像素比(device pixel ratio, DPR

iPhone 7 Plus的屏幕分辨率为1920 x 1080像素,但它的设备像素比(DPR)为3。这意味着每个CSS像素(即网页设计时的逻辑像素)实际上由3个物理像素组成。例如,屏幕上实际的1 CSS像素会占用3 x 3 = 9物理像素。

width=device-width的作用

当你设置width=device-width时,浏览器会将视口的宽度设为设备的逻辑宽度,而不是真正的物理屏幕分辨率。

对于iPhone 7 Plus,视口宽度通常会设置为375px(iPhone 7 Plus设备的逻辑宽度)。这意味着你看到的document.body.clientWidth是375px,而不是1920px。

为什么会显示为398px?可能是因为浏览器在处理视口的宽度时考虑到了页面的边距、缩放因子或者其它因素。此外,浏览器还可能通过屏幕的设备像素比来进行相应的调整,从而显示为398px,而不是375px。这个值也可能受浏览器界面、工具栏或状态栏的影响。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注