-webkit-min-device-pixel-ratio: 2是什么意思?
DPI(DPR) stands for Dots Per Inch which technically means printer dots per inch。
这个参数实际上量化了屏幕的物理分辨率和显示清晰度,比如iphone的DPR就是2,比一般的手机都要高。
同样的图片在不同手机上显示的效果就有很大不同,特别是对于apple设备,由于其DPR比较高,因此一般必须对其
应用分辨率高的图片显示效果才能得到保证。
常见的,可以使用media query来应用不同的style
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
对于如何实现在苹果高分辨率手机上去应用高分辨率的图片,有一个叫做retina.js的js代码,可以实现相应功能,为了方便使用,
设置有相应的less/sass mixin以便方便开发者使用
下面是常见手机型号的参数值:
- -webkit-min-device-pixel-ratio为1.0
- 所有非Retina的Mac
- 所有非Retina的iOS设备
- Acer Iconia A500
- Samsung Galaxy Tab 10.1
- Samsung Galaxy S
- -webkit-min-device-pixel-ratio为1.3
- Google Nexus 7
- -webkit-min-device-pixel-ratio为1.5
- Google Nexus S
- Samsung Galaxy S II
- HTC Desire
- HTC Desire HD
- HTC Incredible S
- HTC Velocity
- HTC Sensation
- -webkit-min-device-pixel-ratio为2.0
- iPhone 4
- iPhone 4S
- iPhone 5
- iPad (3rd generation)
- iPad 4
- 所有Retina displays 的MAC
- Google Galaxy Nexus
- Google Nexus 4
- Google Nexus 10
- Samsung Galaxy S III
- Samsung Galaxy Note II
- Sony Xperia S
- HTC One X
-webkit-min-device-pixel-ratio: 2是什么意思?的更多相关文章
- Device Pixel Ratio & Media Queries
一些重要的名词解释: CSS pixels(CSS 像素):详见http://www.w3.org/TR/css3-values/#reference-pixe CSS声明的像素值,可随着放大缩小而放 ...
- 移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible
其实H5适配的方案有很多种,网上有关于这方面的教程也非常的多. 不管哪种方法,都有其自己的优势和劣势. 为什么推荐使用Flexible库来做H5页面的终端设备适配呢? 原理 简单易懂 源码疑问 ...
- dpr——设备像素比(device pixel ratio)
设备像素比 = 物理像素 / 逻辑像素 1.物理像素 显示器上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. 例如:手机大小固定,物理像素越高,画面越清晰 ...
- [Canvas] Make Canvas Responsive to Pixel Ratio
Canvas is great for high performance graphics rendering but by default the results look blocky on ph ...
- [Tools] Create your own mobile emulator device by using Chrome dev tool
Using the New Device Emulation Interface The Device Emulation interface changed a bit with the newer ...
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 使用Flexible实现手淘H5页面的终端适配
拿到设计师给的设计图之后,剩下的事情是前端开发人员的事了.而手淘经过多年的摸索和实战,总结了一套移动端适配的方案--flexible方案. 这种方案具体在实际开发中如何使用,暂时先卖个关子,在继续详细 ...
- webapp:移动端高清、多屏适配方案(zz)
来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉 ...
- 解惑好文:移动端H5页面高清多屏适配方案 (转)
转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...
- 【学习笔记】移动Web手册(PPK力作)
又是好久没写博客了,最近把近半年的总结,全部总结到博客园吧.先写最近的一个移动端的学习笔记.毕竟移动端开发了一段时间,就写一写读<移动web手册>中,对我感触比较深的几个点—— 一.浏览器 ...
随机推荐
- 【JQuery源码】事件绑定
事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...
- 关于注解Annotation第一篇
注解的定义格式如下: public @interface 注解名 {定义体} 定义体就是方法的集合,每个方法实则是声明了一个配置参数.方法的名称作为配置参数的名称,方法的返回值类型就是配置参数的类型. ...
- windwos文档格式转换成unix格式
在工作学习中我们避免不了需要将一些脚本和命令记录在笔记里面,我使用的是有道云笔记,每当我将上次记录在有道云的脚本复制出来进行使用的时候,总会报一些奇怪的错误,要么是包含换行符,要么就是格式不对,但是我 ...
- Java保存文本文件
String requestData = "something you want to save"; String saveFilePath = "C:\\Users\\ ...
- Entity Framework取消修改
最近碰到一个场景:在Entity Framework保存错误的时候,需要将该错误记录在DB中.因为DB在savechange的时候会继续保存之前的数据,所以一直会报错,无法保存错误日志. 这就需要实现 ...
- rem手机端适配
<script> document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+ ...
- C#语法之泛型
前面两篇C#语法主要是回顾委托相关的.这篇主要回顾了泛型. 一.为什么要有泛型? 我们在写一些方法时可能会方法名相同,参数类型不同的方法,这种叫做重载.如果只是因为参数类型不同里面做的业务逻辑都是相同 ...
- SpringBoot源码分析之SpringBoot的启动过程
SpringBoot源码分析之SpringBoot的启动过程 发表于 2017-04-30 | 分类于 springboot | 0 Comments | 阅读次数 SpringB ...
- BG.Hadoop.Master
1. 安装JDK JDK安装包复制到/opt文件夹 cd /opt rpm -ivh jdk-8u121-linux-x64.rpm vim /etc/profile 增加 JAVA_HOME=/us ...
- Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
sudo chown -R username /usr/local/lib/node_modules 注:username要具有/usr/local/lib/node_modules的读写权限