-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 */
}

下面是常见手机型号的参数值:

  • -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
时间: 2025-01-04 08:45:17

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

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

该方案 会 自动根据你的屏幕大小配置好 根节点的 font-size 大小 书写的时候可以用less 直接写 px, 编译会自动转换成rem单位 也可以用px2rem插件 对应@3dpr 的图, 可以用 data-dpr 判断 [data-dpr="3"] & { background-image: url("../img/@3x/[email protected]@version"); } http://www.cnblogs.com/lyzg/p/505

[Canvas] Make Canvas Responsive to Pixel Ratio

Canvas is great for high performance graphics rendering but by default the results look blocky on phones tablets and laptops with high pixel density or Retina displays. By using canvas width and height attributes and style props we can use window.dev

[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 version of Chrome Dev Tools. Here are the instructions for emulating the required device characteristics in the new UI: Select Edit from the Responsi

移动web开发之像素和DPR

移动web开发之像素和DPR 目录 [1]定义[2]分类[3]缩放[4]DPR[5]API 前面的话 像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于这些问题,可能就说不清楚了.本文将介绍关于像素的相关知识 定义 像素,又称画素,是图像显示的基本单位,译自英文“pixel”,pix是英语单词picture的常用简写,加上英语单词“元素”element,就得到pixel,故“像素”表示“图像元素”之意,有时亦被称为

移动端多屏适配方案

原文:http://www.cocoachina.com/webapp/20150715/12585.html?utm_source=tuicool 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667).

移动端高清、多屏适配方案

移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首先,选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480,现在更多的是iphone6的375×667). 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对i

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

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

跨终端开发必备概念汇总

移动大潮已然到来,跟上节奏是必须.在进行更进一步深入学习和研究各种相关问题之前,有些概念是必须研究透彻的,这将会是以后开发和适配的基石. 一.单位英寸像素数(Pixel Per Inch,PPI) PPI是一个度量单位,是像素密度单位,它表示了现实世界一英寸内的像素数,因此它决定了屏幕的显示质量. 像我们常说的1024*768其实是指的屏幕分辨率,对应在现实中的分辨率就用PPI作为度量单位,可以举个例子来说明: |------------------------------------| |如果

移动端适配方案以及rem和px之间的转换

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

移动端应该如何动态设置字体大小?

rem由来:font size of the root element,那么rem是个单位,单位大小由它第一代老祖宗的font-size的大小决定.现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康,因为不仅要知道rem是个单位,更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB. 事故造成原因:1.px单位在PC上很流行,在手机屏幕上一看,MLGB的,同样的12px却小的跟蚂蚁似的.2.好不容易在iPhone4上调的正常了,换个菊花牌手机,MBD不堪入目了.3.知道