iphone - devicePixelRatio 真的有用吗

Question

我只是想知道与基于web-kit的浏览器和苹果设备相关的devicePixelRatio是否真的有用，或者它只是苹果的私有(private) Assets 。要知道，web-kit 引擎也是苹果公司的。我认为这种东西只对苹果的 Retina 屏幕有意义，我一直认为屏幕分辨率和操作系统分辨率之间的差异应该由操作系统妥善处理，这不是我们的任务。
如果 devicePixelRatio 的值有很多，范围从 0 到 1000000，我应该为这些屏幕准备多少张图片。

Answer 1

Web 浏览是移动设备用户最流行的事件，网页本身以各种形状和大小提供。

Apple 和跟随他们进入移动硬件领域的各种公司需要让网络浏览体验尽可能简单，以便最大限度地利用和依赖他们的设备所花费的时间。他们需要避免让用户在页面上进行缩放和平移以阅读内容，因此他们向 Web 开发人员公开了一个称为“元视口(viewport)”的 API，这使他们可以毫不费力地提供小屏幕改编版他们的网站。

后来他们意识到，以这种方式缩放会使图像在更高 dpi 设备(如 apple retina 和 android 设备(如 galaxy sIII 和 nexus 设备)中放大时看起来像垃圾。因此，他们制作了一个变量 devicePixelRatio 和一个相应的 CSS 媒体查询，以使 Web 开发人员能够检测到给定设备需要更高分辨率的图像，以便网站在缩放后看起来更好。没有人期望网站所有者/开发人员浪费 2 倍的带宽来向每个人提供带有子像素数据的位图，因为他们的 0.2% 的用户恰好使用的设备对于给定的物理尺寸来说是通常像素数量的 2 倍。为了使高 dpi 设备取得成功，他们需要使网络在其上看起来不错，而使网络在其上看起来不错的唯一方法是让网站所有者/开发人员选择制作它变得容易且值得他们的网站在上面看起来不错。

网站开发人员需要权衡花费额外时间有选择地提供图像的成本和 yield ，以便网站在高像素密度设备上看起来不会很差。如果网络发展到大多数网站都这样做的地步，消费者就会觉得您的网站质量低下，而不是因为他们使用的硬件存在某些缺陷。

只是为了澄清:

苹果只使用 1 和 2 作为他们的 devicePixelRatio。

google 提倡使用 1、1.5 和 2(尽管他们并不总是强制执行)。

Microsoft 在其 screen.deviceXDPI 值中使用 96dpi (1) 144dpi (1.5) 192dpi (2)

大多数人只向所有高于某种阈值的设备提供一个 2x 分辨率版本的 Assets ，例如 1.3 和 1x 版本的设备低于该阈值的设备。对于那些了解所有这些设备值的确切含义以及如何使用“CSS 媒体查询”或它们各自的 javascript 值的 Web 开发人员来说，这非常容易，而且并不像我怀疑您想象的那样令人沮丧。