css - 什么是设备像素比？

Question

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

Answer 1

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

在 iOS Retina 设备上，screen.width 给出了 dips 的宽度。因此，视网膜和非视网膜 iPad 都在纵向模式下报告 768。在三款 Android 设备上，screen.width 以物理像素为单位给出宽度；分别为 480、720 和 800。设备上的所有浏览器都使用相同的值。（想象一下，如果同一设备上的某些浏览器使用 dips 和其他物理像素！）

这导致作者得出以下结论：

• 在 iOS 设备上，将 devicePixelRatio 乘以 screen.width 以获得物理像素数。
• 在 Android 和 Windows Phone 设备上，将 screen.width 除以 devicePixelRatio 以获得下降次数。

在您的情况下，重要的是屏幕宽度，简单明了。DIP 的计算是由设备负责的，而不是您作为开发人员。如果设备想要补偿不同的像素比率，它将为您提供 DIP 宽度并给出比率。如果它认为页面应该以未修改的原生像素分辨率显示，它将为您提供该宽度。这篇文章的作者还得出了以下我觉得有趣的结论：

Apple 添加像素是因为它想让显示更清晰、更流畅，而 Android 供应商添加像素是为了在屏幕上塞进更多的东西。

无论如何，请使用浏览器为您提供的宽度并将其留给设备进行补偿。