我已经设置了一些CSS来检测客户端是否使用Retina或其他HiDPI显示器,并基于此为各种div
显示不同的background-image
。这是我的语法:
<!-- LoDPI and MedDPI displays -->
#div {
opacity:0.4;
position:absolute;
top:0px;
z-index:2;
width:1600px;
height:900px;
animation-name:ring;
animation-delay:0s;
animation-duration:1500ms;
animation-timing-function:cubic-bezier(0.225, 1.650, 0.000, 0.805);
animation-fill-mode:forwards;
background-image:url(/valid/path/to/regular/file);
}
<!-- For Retina and HiDPI displays -->
@media only screen and (min-device-pixel-ratio: 1.4) {
#div {
background-image:url(/valid/link/to/HiDPI/file);
background-position:center;
background-size:contain;
}
}
问题是,当我在像素比例设置为 1.5("类似于 1920x1200")的 Retina MBP 上尝试此操作时,显示的是正常分辨率图像而不是高分辨率图像。
您没有关闭所有大括号。无论如何,为了获得更好的支持矩阵,请将媒体查询替换为
@media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/*your rules*/
}
我遇到了同样的问题:最小设备像素比率似乎不支持(前缀)无前缀的 JS!?最小设备像素比不符合 W3C 标准。
当我将其与供应商前缀一起使用时,一切正常?!
这对我来说很好用(删除评论)
@media (-webkit-min-device-pixel-ratio: 2), /* Firefox16, Chrome, Safari, iOS, Android */
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox16) */
(-o-min-device-pixel-ratio: 2/1), /* Opera */
(min-device-pixel-ratio: 2), /* not defined yet, http://www.w3.org/TR/css3-mediaqueries/ */
(min-resolution: 2dppx), /* not yet, probably in future, see http://www.w3.org/TR/css3-mediaqueries/ */
(min-resolution: 192dpi) /* works for non css3 browser */
{
/* your styles go here */
}
- Opera 值应为 1/1、3/2、2
- /1 等效于 1、1.5 和 2。
- DPI 值应为 96、144、192,相当于 1、1.5 和 2。
使用 -webkit-text-size-adjust:none 时;从纵向模式切换到横向模式时,字体大小在 iPhone 上不会爆炸;-)