本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着显示器的发展,这个属性也慢慢登上了前端技术的舞台。

一、定义

定义如下:

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是:window.devicePixelRatio = 物理像素 / dips

dip或dp,(device independent pixels,设备独立像素)与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

所有非视网膜屏幕的iphone在垂直的时候,宽度为320物理像素。当你使用的时候,会设置视窗布局宽度(不同于视觉区域宽度,不放大显示情况下,两者大小一致,见下图)为320px, 于是,页面很自然地覆盖在屏幕上。

mobile_viewportzoomedout

这样,非视网膜屏幕的iphone上,屏幕物理像素320像素,独立像素也是320像素,因此,window.devicePixelRatio等于1.

而对于视网膜屏幕的iphone,如iphone4s, 纵向显示的时候,屏幕物理像素640像素。同样,当用户设置的时候,其视区宽度并不是640像素,而是320像素,这是为了有更好的阅读体验 – 更合适的文字大小。

这样,在视网膜屏幕的iphone上,屏幕物理像素640像素,独立像素还是320像素,因此,window.devicePixelRatio等于2.

二、浏览器支持

  1. IE以及FireFox压根不支持。可能接下来的版本会支持。

  2. Opera桌面浏览器时,即使是视网膜设备,返回的值也是1而不是2. 不过,这个bug在后续的版本中会修复的。

  3. Opera Mobile 10不支持,不过Opera Mobile 12正确支持。

  4. UC总是显示1,不过其viewport属性有些让人费解。

  5. 只有最近的Chrome浏览器才能正确实现该属性。Chrome19返回不准确的1, Chrome22可以正确返回2.

  6. MeeGo WebKit (Nokia N9/N950)就吓人了:当你应用了meta viewport时候(类似),值会从1变成1.5!

真是喜忧参半。好的是Safari, Android WebKit, Chrome 22+(Android), Opera Mobile, BlackBerry WebKit, QQ, Palm WebKit, 及Dolfin都能正确实现该属性。

当然,大部分这些浏览器仍然运行在devicePixelRatio值应该为1的系统上,当它们移动到视网膜类似设备时候,可能就会遇到问题。

两个注意事项

MeeGo WebKit meta viewport应用时改变值的做法是大错特错的。设备像素比应该是不变的,不仅物理像素值,设备独立像素也是如此。

二是,一些浏览器习惯在meta viewport应用时改变各种东西(三星的Dolfin就是代表),这完全就是在瞎搞。唯一的变化应该是布局视图的尺寸。如果浏览器变了其他什么都是,那都是很挫的。

四、其他相关属性

当页面设置了<meta name="viewport" content="width=device-width">时候,document.documentElement.clientWidth在大部分浏览器下,得到的是布局视区的宽度,等同于dips的宽度。

对于screen.width的值:

  • 在iOS视网膜设备上,screen.width返回dips宽。因此,在竖着显示的时候,视网膜显示屏的ipad和非视网膜显示屏的ipad返回的都是768.
  • 在上面提到的三个Android设备上,screen.width返回的是物理像素宽度,分别480, 720, 和800. 该设备上的所有浏览器都是该值。

Vasilis有一个很好的理论:苹果像素,因为它想使显示更清晰,更流畅,而Android厂商增加的像素在屏幕上塞进更多的东西。它解释了为什么苹果强调非视网膜视网膜的连续性,而Android集中在原始像素数。

Nokia Lumia Windows Phone上的IE9 screen.width的值与Android设备一样,返回的是物理像素。而且其不支持devicePixelRatio. 因此,我们无法从中看出其对待像素的态度是如何的。

小小结论

  1. devicePixelRatio在大多数浏览器是值得信赖的。
  2. 在iOS设备,screen.width乘以devicePixelRatio得到的是物理像素值。
  3. 在Android以及Windows Phone设备,screen.width除以devicePixelRatio得到的是设备独立像素(dips)值。

注:本文的DIPs切勿和DPI搞混了!DPI指每英寸点的个数,本文的DIPs指设备独立像素。

参考文章:
devicePixelRatio
More about devicePixelRatio

转载请注明:知识蚂蚁 » 设备像素比devicePixelRatio简单介绍

我来说说

(便于我们更好的交流)

有不明白的地方欢迎留言哦~
取消