发布于2015-05-18,阅读13802次,收藏 3次,评论1条 - 来自一粒麦子  | 收藏

响应式布局—设备像素密度测试 (-webkit-min-device-pixel-ratio)

最近遇到这种头疼的问题,百思不得其解,不耻下问,悬梁刺股这些事情都做过之后,终于看到希望,于是攒见好就收,感觉整理分享给大家,希望有所帮助。

对手机分辨率和网页像素的初步认识是,是2倍的差别。

但是让人费解的是为什么还要 1.325 这种数据呢,原来是这么回事:

举个栗子:

 

以下是我摘抄并翻译的,想了解更多原文在尾部有链接哈~


-webkit-min-device-pixel-ratio的常见值对比
是设备上物理像素和设备独立像素,设备像素比率

设备 分辨率 设备像素比率Android LDPI 320×240 0.75 Iphone 3 & Android MDPI 320×480 1 Android HDPI 480×800 1.5 Iphone 4 960×640 2.0



设备像素为:1.0    (-webkit-min-device-pixel-ratio)

所有non-Retina mac电脑
苹果iPhone(第一代)
苹果iPhone 3 g
苹果iPhone 3 gs
苹果iPad(第一代)
苹果iPad 2
苹果iPad迷你(第一代)
宏碁Iconia A500
三星Galaxy Tab 10.1
三星Galaxy S


设备像素为:1.3    (-webkit-min-device-pixel-ratio)

 

华硕MemoPad高清7
谷歌Nexus 7(2012型)

设备像素为:1.4    (-webkit-min-device-pixel-ratio)

 

诺基亚流光(Lumia)520

 

设备像素为:1.5    (-webkit-min-device-pixel-ratio)

 

谷歌Nexus S
HTC欲望
HTC Desire HD
HTC不可思议的年代
HTC速度
宏达电的感觉
Kindle Fire高清
三星Galaxy S II
索尼平板电脑Xperia Z
索尼Xperia U

 

设备像素为:2.0    (-webkit-min-device-pixel-ratio)

 

所有mac视网膜显示器
苹果iPhone 4
苹果iPhone 4 s
苹果iPhone 5
苹果iPhone 5度
苹果iPhone 5 s
苹果iPhone 6
苹果iPad(第三代)
苹果iPad 4
苹果iPad的空气
苹果iPad迷你(2rd代)
HTC一条X
谷歌的Galaxy Nexus
谷歌Nexus 4
谷歌Nexus 7(2013型)
谷歌Nexus 10
摩托罗拉极限摩托
三星Galaxy S三世
三星Galaxy注意二世
索尼Xperia年代
索尼Xperia T

 

设备像素为:2.6    (-webkit-min-device-pixel-ratio)

 

诺基亚流光(Lumia)930

设备像素为:3.0    (-webkit-min-device-pixel-ratio)

HTC(M7)
HTC的蝴蝶
华为荣耀6
苹果iPhone 6 +
LG G2
联系5
OnePlus一
相对应的人找到7(X9076)
三星Galaxy S4
三星Galaxy注3
三星Galaxy注4
索尼Xperia Z
小米小米3



原地址:

响应式布局设置--@media only screen and 

http://chaofu200900.blog.163.com/blog/static/110119533201341102618140/


Device pixel density tests

http://bjango.com/articles/min-device-pixel-ratio/



关于作者

一粒麦子

一粒麦子

极客主页:一粒麦子

评论或回答

  1. 没有任何评论
评论请先登录



以后再转发,立刻下载!