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

Question

我正在使用 iOS 模拟器来测试各种 iOS 设备的响应式主题的媒体查询，但以下媒体查询未呈现。我已经参考了 w3.org 媒体查询标准以及这篇博文、 A List Apart的像素身份危机和Mozilla 的博文以及其他一些内容，但我没有看到是什么破坏了查询，是吗？

/*-- 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)