css3 媒体查询 : iPad overwrite iphone4 (retina) rules

Question

似乎 iPad 规则覆盖了 iPhone4 相关规则。我该如何解决这个问题？

/* iPad */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    #theDiv { width: 400px; }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    #theDiv { width: 600px; }    
}


/* iPhoneRetina */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    #theDiv { width: 200px; }
}

Answer 1

您可以将 Retina 显示屏的像素比提高到 2。

Here's the link to the Webkit blog post about it .转到标题“条件包含”。