Devices with -webkit-min-device-pixel-ratio: 1.0
All non-Retina Macs
Apple iPhone (1st generation)
Apple iPhone 3G
Apple iPhone 3GS
Apple iPad (1st generation)
Apple iPad 2
Apple iPad mini (1st generation)
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S
Devices with -webkit-min-device-pixel-ratio: 1.3
Asus MemoPad HD 7
Google Nexus 7 (2012 model)
Devices with -webkit-min-device-pixel-ratio: 1.4
Nokia Lumia 520
Devices with -webkit-min-device-pixel-ratio: 1.5
Google Nexus S
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation
Kindle Fire HD
Samsung Galaxy S II
Sony Xperia Tablet Z
Sony Xperia U
Devices with -webkit-min-device-pixel-ratio: 2.0
All Macs with Retina displays
Apple iPhone 4
Apple iPhone 4S
Apple iPhone 5
Apple iPhone 5c
Apple iPhone 5s
Apple iPhone 6
Apple iPad (3rd generation)
Apple iPad 4
Apple iPad Air
Apple iPad mini (2rd generation)
HTC One X
Google Galaxy Nexus
Google Nexus 4
Google Nexus 7 (2013 model)
Google Nexus 10
Motorola Moto X
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
Sony Xperia T
Devices with -webkit-min-device-pixel-ratio: 2.6
Nokia Lumia 930
Devices with -webkit-min-device-pixel-ratio: 3.0
HTC One (M7)
HTC Butterfly
Huawei Honor 6
Apple iPhone 6 Plus
LG G2
Nexus 5
OnePlus One
Oppo Find 7 (X9076)
Samsung Galaxy S4
Samsung Galaxy Note 3
Samsung Galaxy Note 4
Sony Xperia Z
Xiaomi Mi 3
http://bjango.com/articles/min-device-pixel-ratio/
分享到：
相关推荐
前端大厂最新面试题-前端综合面试 ...//devicePixelRatio=2设置meta <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> //devicePixelRatio=3设置meta ...
这段代码中，`-webkit-min-device-pixel-ratio:0`是一个仅在WebKit浏览器中有效的媒体特性，用于指定设备像素比，可以用来触发WebKit特定的样式规则。 2. **伪类前缀**： - 通过使用`-webkit-`前缀结合伪类来实现...
@media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #ccc; } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .border { border: 0.333333px solid #ccc; ...
}@media all and ( -webkit-min-device-pixel-ratio : 1.5 ) , ( min--moz-device-pixel-ratio : 1.5 ) , ( -o-min-device-pixel-ratio : 1.5 / 1 ) , ( min-device-pixel-ratio : 1.5 ) , ( min-resolution : 138 ...
(-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #ccc } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .border { border: 0.333333px solid #ccc } } 使用边框图片 这样的1张6...
@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) { .example { background: url(http://guandian.co/logo.jpg) no-repeat center top; } } ``` #...
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .t1 { color: #9900FF; } /* Chrome/Safari */ } @media screen and (-webkit-min-device-pixel-...
在这个媒体查询中，`-webkit-min-device-pixel-ratio:0` 是一个WebKit专有的特性，它通常用于区分WebKit浏览器和其他非WebKit浏览器。在大括号内部，你可以定义只对Safari和Chrome生效的CSS样式，比如： ```css ....
@media only screen and (min-device-height: 790px) and (max-device-height: 810px) and (-webkit-min-device-pixel-ratio: 1.3) and (-webkit-max-device-pixel-ratio: 1.4) and (orientation: landscape) { ...
浏览器特定的 hacks /* IE 6 */ ... /* IE 7 */ ... /* IE 7 and modern browsers */ ... /* Modern browsers (not IE 7) */ ... @media screen and (-webkit-min-device-pixel-ratio:0) { .yourclass { } }
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .t1{color:#9900FF} /* Opera */ } @media screen and (-webkit-min-device-pixel-ratio:0) { .t1{...
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-...
opera、safari、chrome识别： @media all and (min-width: 0px){…}...@media screen and (-webkit-min-device-pixel-ratio:0){…} //IE、Firefox不识别该规则 仅opera识别： @media screen and (-webkit-min-device
----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { / Here ...
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .t1 { color: #9900FF } /* Opera */ } @media screen and (-webkit-min-device-pixel-ratio:0) { ...
@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) { #nav { width: 400px; } } ``` 这些代码片段利用CSS的特性，为Firefox、Safari、Chrome和Opera...
PostCSS image-set（）函数 可让您按照规范在CSS中使用image-set()函数显示与分辨率...}@media ( -webkit-min-device-pixel-ratio : 2 ), ( min-resolution : 192 dpi ) { .example { background-image : url( img@2x.p
@media screen and (-webkit-min-device-pixel-ratio: 0) { .test1:after { content: "."; display: inline-block; width: 100%; overflow: hidden; height: 0; } } ``` 在这个例子中，`.test1` 类定义了...
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { /* 在DPR为2或更高的设备上应用的样式 */ } ``` ...