打开chrome浏览器,模拟手机调试,iphone6/7/8 行显示的 375*667, DPR:2如何理解呢?这就需要理解一下几个概念:
设备像素
设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。
设备独立像素
(也叫密度无关像素),可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素(比如:CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”),然后由相关系统转换为物理像素。
所以说,物理像素和设备独立像素之间存在着一定的对应关系。在web开发中可以理解为css像素。
PPI/DPI
PPI/DPI 是像素密集度,表示屏幕每英寸(对角线)拥有的像素个数,PPI/DPI 的计算方式如下(以 IPhone6 为例):
计算出的 IPhone6 的 PPI 为:325.16。该结果表示在 IPhone6 上,每英寸有 325.16 个物理像素,四舍五入为 325 个物理像素。
可以发现:这个 PPI 的值近似等于 IPhone6 这个设备的水平物理像素的一半,也即:
750 / 325 = 2
这个由设备水平物理像素和设备 PPI/DPI 计算出来出来的比值就是设备像素比。
CSS 中的像素
CSS 中的像素是一个相对值,不是绝对值,因此1px 的 CSS 像素并不一定等于 1px 的物理像素。
需要注意的是,CSS 中的像素单位是抽象的,只是一种规范,最终的显示是取决于物理设备的。物理设备根据某种规则,决定该采用几个物理像素去显示 1px 的 CSS 像素,这个规则就是设备像素比。
设备像素比
前面已经说到过,设备像素比等于设备的水平物理像素和设备 PPI 的比值。设备像素比的意义就是决定了用多少个物理像素去显示 1px 的 CSS 像素。比如在 IPhone6 中,设备像素比为 2,那么在 IPhone6 上就会使用 2*2 = 4 个物理像素去显示 1px 的 CSS 像素。
因此,如果我们给一个 DIV 元素设置 300px * 300px 的样式,那么其在 IPhone6 上将会占用 600 * 600 个物理像素。这就是为什么明明 IPhone6 的分辨率为 1334 * 750(物理像素),而将 DIV 元素的宽度设置成 300px 后,其几乎占满了水平屏幕的原因。
上例在 IPhone 中的渲染效果也可以理解为:在分辨率为 667 * 375(设备宽度不变),设备像素比为 1 的设备上显示 300px 宽度的 DIV 的效果。既然设备像素比为 1,那么也可以这么理解:上例在 IPhone6 中的显示效果相当于在 667 * 375 的 Chrome 浏览器下的显示效果。
screen.width/height
获取设备独立像素值,也就是css宽/高,iphone6中这个宽高就是375/667, 如需获取分辨率,怎需要在此基础上乘以DPI, 也就是window.devicePixelRatio.
document.documentElement.clientWidth
获取文档css宽度,iphone6在全屏情况下375。
window.devicePixelRatio
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是:window.devicePixelRatio = 物理像素 / dips
注意:你可以为这个 window.devicePixelRatio
重新赋值,但并不会对最终的显示造成任何的影响。
window.devicePixelRatio = 10
window.devicePixelRatio // 10
上面重新设置了 window.devicePixelRatio
的值,但不会影响浏览器的显示效果,也就是说,手动设置 window.devicePixelRatio
是没有任何用处的。