devicePixelRatio

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

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

一、定义
定义如下：

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

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

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

布局视图大小张鑫旭-鑫空间-鑫生活

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

而对于视网膜屏幕的iphone，如iphone4s, 纵向显示的时候，屏幕物理像素640像素。同样，当用户设置的时候，其视区宽度并不是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时候（类似），值会从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, 如下图：
FireFox不支持devicePixelRatio结果截图张鑫旭-鑫空间-鑫生活

Chrome下是认识这个属性的，在我机子上弹出的是1, 如下图：
Chrome浏览器下devicePixelRatio弹出结果截图张鑫旭-鑫空间-鑫生活

其他一些系统、设备

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

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

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标准似乎不严格，于是自家人玩自家人的游戏，对于开发者而言，可能又会面临苦逼~~

视网膜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，使用正常的图片——（这里内容其实属于视网膜站点的开发内容）。

四、其他相关属性
当页面设置了时候，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相关推荐

移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
css 获取屏幕宽度_设备像素、设备独立像素、CSS像素、分辨率、PPI、devicePixelRatio 的区别...
设备像素 (device pixels) 也称为物理像素,显示器的最小物理单位.这里需要注意,一个像素并不一定是一个小正方形区块,也没有标准的宽高,只是用于显示丰富色彩的一个"点" ...
设备像素比devicePixelRatio简单介绍
本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着显示器的发展,这个属性也慢慢登上了前端技术的舞台. ...
android 设备最大像素,设备像素比devicePixelRatio简单介绍
本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持,随着显示器的发展,这个属性也慢慢登上了前端技术的舞台. ...
QWindow类devicePixelRatio函数作用
在实际开发中,我们经常看到如下代码段: void QtWidgetsApplication1::copyWnd() {qreal dpr = window()->windowHandle()-& ...
Window.devicePixelRatio
devicePixelRatio:指显示器的物理像素分辨率与CSS像素分辨率之比:标准显示器该值为1: 对于HiDPI / Retina显示屏则期望值为2:比例越高,说明同一块大小区域里面填充的像素点 ...
设备像素比（devicePixelRatio）
设备像素比(devicePixelRatio,dpr) 定义 window.devicePixelRatio是设备物理像素和设备独立像素(device-independent pixels,dips) ...
html2canvas与window.devicePixelRatio
官方文档 html2canvas(document.querySelector('.content')).then(canvas => {console.log(canvas);// docum ...
three相机在模型上_基于 three.js 的 3D 粒子动效实现
作者:个推web前端开发工程师梁神一.背景粒子特效是为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器.脚本来控制其整体或单 ...

devicePixelRatio

devicePixelRatio相关推荐

最新文章

热门文章