我只是想知道基于 web-kit 的浏览器和苹果设备相关的 devicePixelRatio 是否真的有用，或者它只是苹果的私人资产。要知道，web-kit 引擎也是苹果公司的。我认为这种东西只对Apple的Retina屏幕有意义，我一直认为屏幕分辨率和操作系统分辨率之间的差异应该由操作系统正确处理，这不是我们的任务。
如果 devicePixelRatio 的值范围从 0 到 1000000，我应该为这些屏幕准备多少张图片。
问问题
157 次
1 回答
1
网页浏览是移动设备用户最流行的活动，网页本身以各种形状和大小提供服务。
Apple 和跟随他们进入移动硬件领域的各家公司需要尽可能简化网络浏览体验，以最大限度地延长使用和依赖其设备的时间。他们需要避免用户为了阅读内容而在页面周围捏合、缩放和平移，因此他们向 Web 开发人员公开了一个称为“元视口”的 API，这使他们能够轻松地为小屏幕适配版本提供服务。他们的网站。
后来他们意识到，以这种方式缩放会使图像在更高 dpi 的设备（如 Apple Retina 和 android 设备（如 Galaxy sIII 和 nexus 设备）中放大时）看起来绝对是垃圾。因此，他们制作了一个可变的 devicePixelRatio 和相应的 CSS 媒体查询，以使 Web 开发人员能够检测给定设备需要更高分辨率的图像，以便网站在缩放后看起来不错。没有人期望网站所有者/开发者浪费 2 倍带宽为每个人提供带有子像素数据的位图，因为 0.2% 的用户碰巧使用的设备具有 2 倍于给定物理尺寸通常像素数量的设备。
由网站开发人员来权衡花费额外时间选择性地提供图像的成本和收益，以便网站在高像素密度设备上不会看起来很糟糕。如果网络到了大多数网站都这样做的地步，消费者会觉得您的网站质量低下，而不是由于他们使用的硬件存在一些缺陷。
只是为了澄清：
苹果只使用 1 和 2 作为他们的 devicePixelRatio。
google 提倡使用 1、1.5 和 2（尽管他们不能总是强制执行）。
微软在他们的 screen.deviceXDPI 值中使用 96dpi (1) 144dpi (1.5) 192dpi (2)
大多数人只为高于某种阈值的所有设备提供其资产的一个 2x 分辨率版本，例如为低于该阈值的设备提供 1.3 和 1x 版本。对于那些了解所有这些设备值的确切含义以及如何使用“CSS 媒体查询”或它们各自的 javascript 值的 Web 开发人员来说，这非常容易，而且不像我想象的那样令人沮丧。
于 2013-03-18T10:24:22.617 回答