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

其他一些系统、设备

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指设备独立像素。

本文转自:http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

设备像素比devicePixelRatio简单介绍的更多相关文章

  1. web移动端,需要清楚设备像素比devicePixelRatio的应用

    我们这里所说的devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持. 概念 devicePixelRatio ,它是 ...

  2. 解决移动端1px的问题,设备像素比devicePixelRatio的应用

    本文主要针对移动端1物理像素问题展开 解决这个问题先要了解一下概念: CSS像素(CSS Pixel):(通俗说:样式中写的值)就是我们在样式代码中常写的逻辑像素,是一个抽象概念,实际并不存在 设备独 ...

  3. 适配方案(五)适配的基础知识之设备像素比 dpr 与 1px 物理像素

    设备像素比 dpr 与 1px 物理像素 物理像素(physical pixel) 手机屏幕上显示的最小单元,该最小单元具有颜色及亮度的属性可供设置,iphone6.7.8 为:750 * 1334, ...

  4. 理解设备像素、设备独立像素、css像素、viewport

    设备像素也叫物理像素. 设备像素指的是显示器上的真实像素,每个像素的大小是屏幕固有的属性,屏幕出厂以后就不会改变了. 设备分辨率描述的就是这个显示器的宽和高分别是多少个设备像素. 设备像素和设备分辨率 ...

  5. 设备像素比dpr介绍

    首先介绍一下概念 devicePixelRatio其实指的是window.devicePixelRatio window.devicePixelRatio是设备上物理像素和设备独立像素(device- ...

  6. h5移动端设备像素比dpr介绍

    首先介绍一下概念 devicePixelRatio其实指的是window.devicePixelRatio window.devicePixelRatio是设备上物理像素和设备独立像素(device- ...

  7. iOS-iOS开发简单介绍

    概览 终于到了真正接触IOS应用程序的时刻了,之前我们花了很多时间去讨论C语言.ObjC等知识,对于很多朋友而言开发IOS第一天就想直接看到成果,看到可以运行的IOS程序.但是这里我想强调一下,前面的 ...

  8. 【浅墨著作】《OpenCV3编程入门》内容简单介绍&amp;勘误&amp;配套源码下载

    经过近一年的沉淀和总结,<OpenCV3编程入门>一书最终和大家见面了. 近期有为数不少的小伙伴们发邮件给浅墨建议最好在博客里面贴出这本书的文件夹,方便大家更好的了解这本书的内容.事实上近 ...

  9. CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport

    1.PX(CSS pixels) 1.1 定义 虚拟像素,可以理解为“直觉”像素,CSS和JS使用的抽象单位,浏览器内的一切长度都是以CSS像素为单位的,CSS像素的单位是px. 1.2 注意 在CS ...

随机推荐

  1. web开发的步骤

    前端知道是浏览器呈现的部分,相对于前端,后台你可以理解为服务器端专门处理.读取.存储数据库数据的部分. 因为网站是基于B\S架构,即浏览器---服务端架构,就程序来讲,可笼统划分为前端程序和服务器端程 ...

  2. 如何控制Java中的线程,总结了3种方法...

    问题:利用Java多线程,轮流打印数字,也就是怎么控制线程.... 1:通过synchronized的关键字,对类的static final 成员进行Lock,锁住对象,来实现同步. private ...

  3. 在Salesforce中对某一个Object添加自定义的Button和Link

    在Salesforce中可以对某一个Object添加自定义的Button和Link,来完成特定的逻辑过程,接下来以一个简单的实例来描述整个处理流程,实现的基本功能和我另外一篇文章中描述的功能是一致的( ...

  4. Redis在Windows下的安装和使用

    NoSQL简介 介绍redis前,我想还是先认识下NoSQL,即not only sql, 是一种非关系型的数据存储,key/value键值对存储.现有Nosql DB 产品: Redis/Mongo ...

  5. Uva 679 Dropping Balls

    这道题如果模拟着来写,思路很简单 #include <iostream> #include <cstring> using namespace std; int T,D,I,c ...

  6. 我的DbHelper数据操作类

    其实,微软的企业库中有一个非常不错的数据操作类了.但是,不少公司(起码我遇到的几个...),对一些"封装"了些什么的东西不太敢用,虽然我推荐过微软的企业库框架了...但是还是要&q ...

  7. delphi 中TStringList Clear 方法的时候该对象有没有被释放

    delphi 中TStringList 通过function AddObject(const S: string; AObject: TObject): Integer; 方法添加了一个对象,请问我在 ...

  8. 静态函数(面向过程的static关键字)

    在函数的返回类型前加上static关键字,函数即被定义为静态函数.静态函数与普通函数不同,它只能在声明它的文件中可见,不能被其他文件使用. 静态函数的例子: #include <iostream ...

  9. Spring Integration - 自动轮询发送手机短信

    Spring Integration 配置 <?xml version="1.0" encoding="UTF-8"?> <beans xml ...

  10. EBay .Net SDK Api 实践

        1.请求流程介绍   提供SOA地址:https://api.ebay.com/wsapi   WSDL生成的代码在WebService.cs文件当中.   ApiCall封装了所有的RPC, ...