前言：
本文来自于对 http://bjango.com/articles/min-device-pixel-ratio/ 的部分整理：
正文：
- -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
相关推荐
前端大厂最新面试题-前端综合面试 ...//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) { ...
@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{...
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
@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) { .t1 { color: #9900FF; } /* Opera支持此处填写Opera的css */ } @media screen and (-webkit-min...
浏览器特定的 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) { ...
----------- 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 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-...
@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或更高的设备上应用的样式 */ } ``` ...