1. 爱猫说设计师网首页
  2. 前端
  3. CSS技术

设备像素比 devicePixelRatio 简单介绍

本文所说 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, 于是,页面很自然地覆盖在屏幕上。

12 - 设备像素比devicePixelRatio简单介绍

这样,非视网膜屏幕的 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 就是代表),这完全就是在瞎搞。唯一的变化应该是布局视图的尺寸。如果浏览器变了其他什么都是,那都是很挫的。

实际测试

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

12 - 设备像素比devicePixelRatio简单介绍

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

12 - 设备像素比devicePixelRatio简单介绍

其他一些系统、设备

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 团队决定坚持 devicePixelRatio1. 这可能是更不错的做法,在 Torch 显示器上 480px 宽度站点或多或少有些难以阅读。

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

然而,Opera,坚持自我,dips 宽度为 320px, 于是 devicePixelRatio720/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 层,则 devicePixelRatio2 应该是无误的。

需要指出的是,如果你把分辨率改成 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. 因此,我们无法从中看出其对待像素的态度是如何的。

小小结论

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

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

参考文章:
devicePixelRatio
More about devicePixelRatio

爱猫说是一个完全独立的媒体,运营只靠网络广告支撑,如果您支持爱猫说设计狮网的话,请对此网站关闭广告拦截功能(如:Adblock)爱猫说设计狮网衷心的感谢您。

本文来自投稿,不代表爱猫说设计师网立场,如若转载,请注明出处:https://www.imaoshuo.com/she-bei-xiang-su-bi-devicepixelratio-jian-dan-jie-shao/

发表评论

登录后才能评论