Question

我正在使用iOS模拟器测试我的响应主题的各种iOS设备的媒体查询，但下面的媒体查询没有呈现。我已经引用了W3.org媒体查询标准加上来自A List Apart的this blog post，A Pixel Identity Crisis和Mozilla's blog post以及其他几个，但是我没有看到什么打破了查询，是吗？

/*-- iPhone 4, 4S Retina -----------------------*/

@media 
screen and (min-pixel-ratio:2) and (min-width:320px) and (max-width:600px),
screen and (-webkit-min-pixel-ratio:2) and (min-width:320px) and (max-width:600px),
screen and (-o-min-pixel-ratio:2/1) and (min-width:320px) and (max-width:600px), 
screen and (min--moz-pixel-ratio:2) and (min-width:320px) and (max-width:600px),/* Firefox browsers prior to FF 16) */
screen and (min-resolution:2ddpx) and (min-width:320px) and (max-width:600px) {
   /*styles here */
}


/*------- iPhone 2G, 3G, 3GS  -------------*/
@media  
screen and (max-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px),
screen and (-webkit-max-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px),
screen and (-o-max-device-pixel-ratio: 1/5) and (min-width: 320px) and (max-width: 600px),
screen and (max--moz-device-pixel-ratio: 1.5) and (min-width: 320px) and (max-width: 600px), /* Firefox browsers prior to FF 16) */
screen and (max-resolution: 1.5ddpx) and (min-width: 320px) and (max-width: 600px) {
   /*styles here*/
}

Answer 1

如果您只针对ios（您不必担心opera / firefox），那么您可以安全地将媒体查询缩短为：

/*-- iPhone 4, 4S Retina -----------------------*/
@media screen and (-webkit-min-pixel-ratio:2) and (min-width:320px) and (max-width:600px) {
   /*styles here */
}

/*------- iPhone 2G, 3G, 3GS  -------------*/
@media screen and (min-width: 320px) and (max-width: 600px){
   /*styles here*/
}

如果您的网站需要(orientation: landscape) / (orientation: portrait)个，也可能是个好主意。

设备像素比率/分辨率的媒体查询：语法不正确？

1 个答案: