什么是设备像素比？ [英] What is Device Pixel Ratio for?

问题描述

据我所知，这是抽象分辨率与设备物理分辨率之间的比率。所以我测试它（在HTC Desire），物理分辨率是 480x800 ，它注销的比例是 1.5 。我抛出一些元素，但仍然采取正确的 480px 宽度填充视口，我的天真想，它需要'320px'。我很困惑！

As far as I know it's the ratio between the "abstract" resolution and the device's physical resolution. So I test it (on HTC Desire), the physical resolution is 480x800, it's logged out the ratio is 1.5. I threw in some elements, but it still take exactly 480px width to fill the viewport where my naive thought it's need '320px'. I'm confused!

推荐答案

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

From http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html, where the author discusses the differences in devicePixelRatio across mobile devices:

在iOS Retina设备上，screen.width给出了宽度。所以一个
视网膜和非视网膜的iPad报告768在肖像模式。在三个
Android设备上，screen.width给出了物理像素的宽度; 480，
720和800。设备上的所有浏览器都使用相同的
值。 （假设同一设备上的某些浏览器使用了dips和
其他物理像素！）

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!)

以下结论：

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

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

What matters in your case is screen width, plain and simple. The calculation of DIPs is something for the device to take care of, rather than you as the developer. If the device wants to compensate for a different pixel ratio, it will serve you a width in DIP and give the ratio. If it feels that pages should be displayed with the native unmodified pixel resolution, it will serve you that width instead. The author of the post also comes to the following conclusion which I find interesting:

苹果添加了像素，因为它想让显示更清晰，平滑，而Android供应商在屏幕上添加了更多像素以填充更多的东西。

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.

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

At any rate, use the width the browser gives you and leave it to the device to compensate.

这篇关于什么是设备像素比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！