css3媒体查询:iPad覆盖iphone4(视网膜)规则

css3媒体查询:iPad覆盖iphone4(视网膜)规则,css,safari,mobile-safari,Css,Safari,Mobile Safari,似乎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-devi

似乎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; }
}

您可以将视网膜显示的像素比调整为2


。转到标题“条件包含”。

您可以将视网膜显示的像素比增加到2


。转到标题“条件包含”。

是否将视口设置为宽度=设备宽度?是否将视口设置为宽度=设备宽度?