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
  1. 所有非Retina的Mac
  2. 所有非Retina的iOS设备
  3. Acer Iconia A500
  4. Samsung Galaxy Tab 10.1
  5. Samsung Galaxy S
  • -webkit-min-device-pixel-ratio为1.3
  1. Google Nexus 7
  • -webkit-min-device-pixel-ratio为1.5
  1. Google Nexus S
  2. Samsung Galaxy S II
  3. HTC Desire
  4. HTC Desire HD
  5. HTC Incredible S
  6. HTC Velocity
  7. HTC Sensation
  • -webkit-min-device-pixel-ratio为2.0
  1. iPhone 4
  2. iPhone 4S
  3. iPhone 5
  4. iPad (3rd generation)
  5. iPad 4
  6. 所有Retina displays 的MAC
  7. Google Galaxy Nexus
  8. Google Nexus 4
  9. Google Nexus 10
  10. Samsung Galaxy S III
  11. Samsung Galaxy Note II
  12. Sony Xperia S
  13. HTC One X

-webkit-min-device-pixel-ratio: 2是什么意思?的更多相关文章

  1. Device Pixel Ratio & Media Queries

    一些重要的名词解释: CSS pixels(CSS 像素):详见http://www.w3.org/TR/css3-values/#reference-pixe CSS声明的像素值,可随着放大缩小而放 ...

  2. 移动端 解决自适应 和 多种dpr (device pixel ratio) 的 [淘宝] 解决方案 lib-flexible

    其实H5适配的方案有很多种,网上有关于这方面的教程也非常的多. 不管哪种方法,都有其自己的优势和劣势. 为什么推荐使用Flexible库来做H5页面的终端设备适配呢?   原理  简单易懂  源码疑问 ...

  3. dpr——设备像素比(device pixel ratio)

    设备像素比 = 物理像素 / 逻辑像素 1.物理像素 显示器上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. 例如:手机大小固定,物理像素越高,画面越清晰 ...

  4. [Canvas] Make Canvas Responsive to Pixel Ratio

    Canvas is great for high performance graphics rendering but by default the results look blocky on ph ...

  5. [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 ...

  6. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  7. 使用Flexible实现手淘H5页面的终端适配

    拿到设计师给的设计图之后,剩下的事情是前端开发人员的事了.而手淘经过多年的摸索和实战,总结了一套移动端适配的方案--flexible方案. 这种方案具体在实际开发中如何使用,暂时先卖个关子,在继续详细 ...

  8. webapp:移动端高清、多屏适配方案(zz)

    来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉 ...

  9. 解惑好文:移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

  10. 【学习笔记】移动Web手册(PPK力作)

    又是好久没写博客了,最近把近半年的总结,全部总结到博客园吧.先写最近的一个移动端的学习笔记.毕竟移动端开发了一段时间,就写一写读<移动web手册>中,对我感触比较深的几个点—— 一.浏览器 ...

随机推荐

  1. Android六大基本布局

    一.基本理论Android六大基本布局分别是:线性布局LinearLayout.表格布局TableLayout.相对布局RelativeLayout.层布局FrameLayout.绝对布局Absolu ...

  2. PHP 修改目录下所有与文件夹重名的前缀文件为index.后缀

    <?phpset_time_limit(0); function traverse($path = '.' , $dir_name='') { $current_dir = opendir($p ...

  3. 基于TrueLicense实现产品License验证功能

    受朋友所托,需要给产品加上License验证功能,进行试用期授权,在试用期过后,产品不再可用. 通过研究调查,可以利用Truelicense开源框架实现,下面分享一下如何利用Truelicense实现 ...

  4. 反转ListBox的ListBoxItem(控件级别,不是数据的反转)

    在默认的排序下,当将ListBoxItem往下移动时,ListBoxItem是从其他ListBoxItem的底部移动的如下图:   但当往上移动时,情况则不是如此,     所以需要尝试对ListBo ...

  5. MySQL查询时区分大小写

    在创建MySQL数据库时,下面这些参数可供我们选择:*_bin: 表示的是binary case sensitive collation,也就是说是区分大小写的 *_cs: case sensitiv ...

  6. php中文转拼音2

    <?php /** * strtopinyin.php * * @name 汉字字符转拼音 * @author Kudosharry * @version v1.0 * */ class Str ...

  7. 阿里云centos6.5实践编译安装LNMP架构web环境

    LNMP 代表的就是:Linux系统下Nginx+MySQL+PHP这种网站服务器架构. 本次测试需求: **实践centos6.5编译安装 LNMP生产环境 架构 web生产环境 使用 ngx_pa ...

  8. yum安装 指定安装目录

    yum -c /etc/yum.conf --installroot=/usr/local --releasever=/ install love

  9. vue权限路由实现方式总结二

    之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...

  10. Sql-Server触发器,根据条件匹配另一个表中的字段

    USE [CDM] GO /****** Object: Trigger [dbo].[UpdateAkisFlight] Script Date: 2018/6/14 16:43:29 ****** ...