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

概念

devicePixelRatio ,它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例,即 devicePixelRatio = 屏幕物理像素/设备独立像素

例如iPhone4S,分辨率为:960×640,取屏幕宽度计算,物理像素640px,设备独立像素320px,那么,devicePixelRatio 值为 640px / 320px = 2,又如iPhone3,计算出来的 devicePixelRatio 值为 320px / 320px = 1

要了解其他手机型号的物理像素,独立像素,设备像素比,请查看http://screensiz.es/phone

在手机上我们一般的图片在高清显示屏下会很模糊,那么什么是高清显示屏呢?

高清显示屏起源于 retina ,打开维基百科,搜索Retina显示屏 ,它是一种由苹果公司设计和委托制造的显示屏,具备足够高像素密度而使得人体肉眼无法分辨其中单独像素点的液晶屏。

高清显示屏原理如下:

  1. 一种具备超高像素密度的液晶屏
  2. 同样大小的屏幕上显示的像素点由1个变为多个

retina显示屏 只是高清显示屏的一种。

现在知道高清显示屏了,那么来分析下一般图片在其设备上会模糊的原因,假如现在有一张图片,有两部手机,一部是普通显示屏,一部是高清显示屏,在同样大小的屏幕上,高清显示屏中的位图会被放大,图片会变得模糊。

常见高清显示屏中位图被放大的比例

我们可以了解到 retina显示屏 中图片被放大的倍数高达 2:1,而其实各种高清显示屏放大的倍数是不同的,有 1.3:1、1.5:1、2:1、3:1 ,目前最多的是 2:1,而 HTC Butterfly、Nexus 5、Samsung Galaxy S4、 Sony Xperia Z  这个几个系列的移动设备,图片被放大的倍数高达 3:1

区分普通显示屏和高清屏

通过 devicePixelRatio的值,就可以区分普通显示屏和高清屏,当devicePixelRatio值等于1时(也就是最小值),那么它普通显示屏,当devicePixelRatio值大于1(通常是1.5、2.0),那么它就是高清显示屏。

移动端如何调用高清背景图

为了更好的提升用户体验,节省移动端的流量,针对不同的显示屏,我们可以采取不用的方案,保证图片在不同显示屏幕下正常展现,这个方法跟设计原生APP中针对不同分辨率采用使用不同图片的原理相似~

通过判断 devicePixelRatio 的值来加载不同尺寸的图片

  1. 针对普通显示屏(devicePixelRatio = 1.0、1.3),加载一张1倍的图片
  2. 针对高清显示屏(devicePixelRatio >= 1.5、2.0、3.0),加载一张2倍大的图片

由于3.0的手机目前比较少,3.0也加载一张2倍的图片是可以接受的。那么,通过上面的方案,我们不是需要设计2套图片,甚至是3套图片呢?

具体还是要看产品需求的用户群、维护成本、产品急需上线等来设计方案,例如用户群大都是高端手机来的,全部都采用加载一张2倍的图片也是可以接受的~

本文建议采用加载2套图片~

Media Queries 调用高清背景图

利用媒体查询结合 devicePixelRatio 可以区分普通显示屏和高清显示屏,并给出了如下CSS设计方案:

.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */
background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图 */
background-image: url(img_2x.png);
}
}

image-set 调用retina背景图

image-set,它是Webkit的私有属性,也是Css4的一个属性,目前有一些网站已经使用到它了,大家可以看下W3C的说明 http://dev.w3.org/csswg/css-images/#image-set-notation,它是为了解决Retina屏幕下的图像显示而生,据我测试,目前支持苹果的 retina 显示屏和部分android 显示屏,也就是说它的兼容性还是挺一般的~

.css{
background: url(../img/bank_ico.png) no-repeat;/* 不支持image-set的显示屏 */
background: -webkit-image-set(
url(../img/bank_ico.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */
url(../img/bank_ico_retina.png) 2x);/* 支持image-set的浏览器的[Retina屏幕] */ }

参考地址:

设备像素比devicePixelRatio简单介绍

高清显示屏原理及设计方案

web移动端,需要清楚设备像素比devicePixelRatio的应用的更多相关文章

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

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

  2. 设备像素比devicePixelRatio简单介绍

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

  3. Web移动端设计——移动设备分辨率一览表

    作为在移动端开发的web程序员来说,如果不懂设备的一些性能,在开发上面是非常耗时间的一件事,同时带来负面影响的是项目的进度被拖腿了. 下面是个人收集的一些移动端设备的分辨率参数: 1.  平板设备: ...

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

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

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

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

  6. 推荐WEB 端批量移动设备管理控制工具STF

    推荐WEB 端批量移动设备管理控制工具STF 1 官方网站 https://openstf.io/ 2 github https://github.com/openstf/stf 后面有时间了,抽空也 ...

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

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

  8. 设备像素,设备独立像素,CSS像素

    之前学了移动端的开发对设备像素.设备独立像素.CSS像素弄得不太清楚,所以趁周末的时间查了一下,稍加整理 一些概念 在进行具体的分析之前,首先得知道下面这些关键性基本概念. CSS像素 CSS像素是W ...

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

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

随机推荐

  1. 使用Json封装scroll,已处理其兼容性问题

    scroll.js /* 使用Json封装scroll */ function scroll(){ //标准模式(遵循W3C标准) if(pageYOffset!==null){ return { t ...

  2. 树莓派连接不上WiFi

    之前还好好的,突然连接不上WiFi,打开文件WiFi配置文件:/etc/wpa_supplicant/wpa_supplicant.conf发现有多个连接记录,把用到的留下,其他的删掉即可: sudo ...

  3. c++多继承多态

    C++多继承多态的实现 如果一个类中存在虚函数,在声明类的对象时,编译器就会给该对象生成一个虚函数指针,该虚函数指针指向该类对应的虚函数表. 多态的实现是因为使用了一种动态绑定的机制,在编译期间不确定 ...

  4. 华为机试001:字符串最后一个单词的长度(华为OJ001)

    华为机试 字符串最后一个单词的长度 计算字符串最后一个单词的长度,单词以空格隔开. 提交网址: http://www.nowcoder.com/practice/8c949ea5f36f422594b ...

  5. Spring系列之AOP的原理及手动实现

    目录 Spring系列之IOC的原理及手动实现 Spring系列之DI的原理及手动实现 引入 到目前为止,我们已经完成了简易的IOC和DI的功能,虽然相比如Spring来说肯定是非常简陋的,但是毕竟我 ...

  6. iOS逆向开发(1):基础工具 | ssh | scp | socat

    小白:小程,我一直想问,什么是逆向来着?是逆向行驶吗? 小程:理解为逆向行驶也没错.一般的项目是从无到有,而逆向是从已有的状态入手,分析出已有的流程与结构的手段. iOS上的逆向开发,是一件有趣的事情 ...

  7. tcp关闭状态详解

    tcp关闭连接不区分客户端和服务端,哪一端口可以主动发起关闭连接请求.所以为了描述方便,描述中的“主动方”表示主动发起关闭连接一方,“被动方”表示被动关闭连接一方. 1. tcp关闭连接状态转换 上图 ...

  8. 如何快速使用Access实现一个登录验证界面?

    大三上学期期末总结,嗯,没错,上学期,写在新学期开始,hhhh. 上学期末的时候信管班的一个同学问我会不会Access,能不能它实现一个登录验证界面,说实话,之前对Access只是有所耳闻,随便敷衍了 ...

  9. 翻译:SET PASSWORD语句(已提交到MariaDB官方手册)

    本文为mariadb官方手册:SET PASSWORD的译文. 原文:https://mariadb.com/kb/en/library/set-password/我提交到MariaDB官方手册的译文 ...

  10. 连接MySQL的10060错误:Can't connect to MySQL server on '*.*.*.*'(10060)

    使用MySQL的图形界面管理工具Navicat for MySQL连接Mysql数据库时提示错误:Can't connect to MySQL server (10060) [出现该问题可能的原因:] ...