装置像素比devicePixelRatio

设备像素比devicePixelRatio
的时候，会设置视窗布局宽度（不同于视觉区域宽度，不放大显示情况下，两者大小一致，见下图）为320px, 于是，页面很自然地覆盖在屏幕上。

的时候，其视区宽度并不是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时候，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指设备独立像素。