设备像素比devicePixelRatio简单介绍

 
 
from 张鑫旭-鑫空间-鑫生活： http://www.zhangxinxu.com
转载自 http://www.zhangxinxu.com/wordpress/?p=2568
 
因为不知道怎么直接从大佬张鑫旭的博客转载过来，可能我太笨了吧，所以就复制粘贴了，格式稍微改了一下，内容没有改~~
 
以下皆为正文

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

本文内容大部分属于翻译性质内容，因此，会不那么通俗易懂。不过，你是做手机开发的，或是有意向的，本文的内容如果细细读来，还是有些收获的。

一、定义

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

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

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

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

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

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

二、浏览器支持

• IE 以及 FireFox 压根不支持。可能接下来的版本会支持。
• Opera 桌面浏览器时，即使是视网膜设备，返回的值也是 1 而不是 2。不过，这个 bug 在后续的版本中会修复的。
• Opera Mobile 10 不支持，不过 Opera Mobile 12 正确支持。
• UC 总是显示 1，不过其 viewport 属性有些让人费解。
• 只有最近的 Chrome 浏览器才能正确实现该属性。Chrome19 返回不准确的 1, Chrome22 可以正确返回 2。
• MeeGo WebKit (Nokia N9/N950) 就吓人了：当你应用了 meta viewport 时候（类似 <meta name="viewport" content="width=device-width">），值会从 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 就是代表），这完全就是在瞎搞。唯一的变化应该是布局视图的尺寸。如果浏览器变了其他什么都是，那都是很挫的。

实际测试
您可以狠狠地点击这里：window.devicePixelRatio值支持与否测试demo

例如，我现在的 FireFox 桌面版(14.0.1)弹出的就是 undefined，如下图：

Chrome下是认识这个属性的，在我机子上弹出的是 1, 如下图：

三、其他一些系统、设备

1、iOS

类似的，无视网膜设备 devicePixelRatio 值为 1，视网膜设备为 2，因为实际的像素个数是双倍。不过，iphone 似乎不愿意改变大家都熟知习惯的320像素宽度布局，没有把设备宽度一下子变成640像素，因此，dips 宽度依然是320, 于是devicePixelRatio 就是640/320 = 2。

iOS 上的情况要相对简单些，除了 1 就是 2，在其他平台也基本上很简单，因为一般分辨率都比较挫，devicePixelRatio 都是 1。

2、Android

据我所知，谷歌的 Nexus One 是第一个使用 dips 的，比 iphone 还早。同时 Galaxy Nexus 以及 Galaxy Note 都是类运动视网膜显示器。近距离探究这三个设备应该会有所收获。

Nexus One 分辨率是 480*800, 为了最优的页面浏览，Android WebKit 团队决定纵向手持时候的宽度依然是320像素，因此，devicePixelRatio值为 480/320 = 1.5。
在同一手机上，Opera Mobile 有相同的结论，dips 为320宽，devicePixelRatio也是 1.5。

顺便提一下，BlackBerry Torch 9810(OS7) 物理像素同样480像素，BlackBerry WebKit 团队决定坚持 devicePixelRatio为 1，这可能是更不错的做法，在 Torch 显示器上 480px 宽度站点或多或少有些难以阅读。

Galaxy Nexus 有像素的提升，为 720×1200，Android 团队决定提高 dips 层的宽度到360像素。从而使 devicePixelRatio为 720/360 = 2，Chrome 团队决定跟进，就如腾讯QQ浏览器所做的那样。

然而，Opera坚持自我，dips 宽度为 320px, 于是 devicePixelRatio为720/320 = 2.25. 不过似乎还与 zoom 缩放层级有关。

Galaxy Note 物理像素为 800×1200，这里所有浏览器都决定使用与 Galaxy Nexus 一样的比率：Android WebKit， Chrome，以及QQ都是 2，也就意味着其 dips 宽度为 400px。然而，Opera 依然一意孤行 2.25，于是其 dips 宽度值有些怪怪的：356px。

Android 标准似乎不严格，于是自家人玩自家人的游戏，对于开发者而言，可能又会面临苦逼~~

3、视网膜MacBook

新的 MacBook 采用视网膜显示屏，其 devicePixelRatio是（如果不出意外）2.，视网膜MacBook的物理像素是2800×1800，而显示出分辨率为1400×900，如果把分辨率作为 dips 层，则 devicePixelRatio为 2 应该是无误的。

需要指出的是，如果你把分辨率改成1920×1200，devicePixelRatio依然是 2。严格来讲，这是不准确的，应该是1.5, 然而你也可以说 MacBook 的分辨率不同于 dips 层，这种情况下 devicePixelRatio在台式机/笔记本下的定义就不一样（哪一个？不知道。）。

在任何情况下，根据苹果的规范做法，devicePixelRatio 值只可能是1或者2，如果你看到2，你要提供视网膜优化显示图片，如果是1，使用正常的图片——（这里内容其实属于视网膜站点的开发内容）。

四、其他相关属性

当页面设置了 <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。因此，我们无法从中看出其对待像素的态度是如何的。

小小结论

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

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

五、参考文章

devicePixelRatio
More about devicePixelRatio