devicePixelRatio确实很有用

时间:2012-10-09 10:59:20

标签: iphone html ios css retina-display

我只是想知道与基于网络工具包的浏览器和Apple的设备相关的devicePixelRatio是否真的很有用,或者它只是苹果的私人资产。你知道,web-kit引擎也属于apple inc。我认为这种东西只对Apple的Retina屏幕有意义,我一直认为屏幕分辨率和操作系统分辨率之间的差异应该由操作系统正确处理,这不是我们的任务。
如果devicePixelRatio的值很多,范围从0到1000000,那么我应该为这些屏幕准备多少张图片。

1 个答案:

答案 0 :(得分:1)

网页浏览是移动设备用户最常用的活动,网页本身以各种形状和大小提供。

Apple和跟随他们进入移动硬件领域的各家公司需要尽可能简化网络浏览体验,以最大限度地利用和依赖其设备所花费的时间。他们需要避免让用户捏合和缩放并平移页面以便阅读内容,因此他们向称为“元视口”的Web开发人员公开了一个API,这使得他们可以轻松地为小屏幕改编版本提供服务。他们的网站。

后来,他们意识到以这种方式进行缩放使得图像在像苹果视网膜和像galaxy sIII和nexus设备这样的Android设备等更高的dpi设备中放大时看起来像绝对的垃圾。因此,他们制作了一个变量devicePixelRatio和一个相应的CSS媒体查询,使Web开发人员能够检测到给定设备需要更高分辨率的图像,以便网站在缩放后看起来很好。没有人希望网站所有者/开发者浪费2倍带宽服务位图的子像素数据到每个人只是因为0.2%的用户碰巧使用的设备的特定像素数量是给定物理尺寸的2倍。为了使高dpi设备获得成功,他们需要使网络看起来很好,并且网络看起来很好的唯一方法就是让网站所有者/开发者选择制作它变得容易和有价值他们的网站看起来很不错。

由网站开发人员来衡量花费额外时间选择性地提供图像的成本和收益,以便网站在高像素密度设备上看起来不会很糟糕。如果网络大多数网站都在这样做,消费者会认为您的网站质量低,而不是因为他们使用的硬件存在一些缺点。

只是为了澄清:

apple仅对其devicePixelRatio使用1和2。

谷歌推广使用1,1.5和2(尽管他们不能总是强制执行此操作)。

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

大多数人只是将其资产的一个2x分辨率版本提供给超过某种阈值的所有设备,例如1.3和1x版本以下的设备。对于那些了解所有这些设备值究竟是什么意思以及如何使用“CSS媒体查询”或其各自的javascript值的网络开发人员来说,这非常容易,而且不像我怀疑你想象的那样令人沮丧。