css - 什么是设备像素比？

Question

据我所知，它是“抽象”分辨率与设备物理分辨率之间的比率。所以我测试了它(在 HTC Desire 上)，物理分辨率是 480x800，它的注销比例是 1.5。我加入了一些元素，但它仍然需要 480px 宽度来填充我天真的认为需要“320px”的视口(viewport)？

Answer 1

来自 http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html ，作者在其中讨论了跨移动设备的 devicePixelRatio 差异:

On iOS Retina devices, screen.width gives the width in dips. So both a retina and a non-retina iPad report 768 in portrait mode. On the three Android devices, screen.width gives the width in physical pixels; 480, 720, and 800, respectively. All browsers on the devices use the same values. (Imagine if some browsers on the same device used dips and others physical pixels!)

由此作者得出以下结论:

• On iOS devices, multiply devicePixelRatio by screen.width to get the physical pixel count.
• On Android and Windows Phone devices, divide screen.width by devicePixelRatio to get the dips count.

在您的情况下，重要的是屏幕宽度，简单明了。 DIP 的计算是设备需要处理的事情，而不是作为开发人员的您。如果设备想要补偿不同的像素比率，它将为您提供 DIP 中的宽度并给出比率。如果感觉页面应该以原始未修改的像素分辨率显示，它将为您提供该宽度。该帖子的作者还得出了以下我觉得很有趣的结论:

Apple added pixels because it wanted to make the display crisper and smoother, while the Android vendors added pixels to cram more stuff onto the screen.

无论如何，使用浏览器给你的宽度并留给设备来补偿。