css3媒體查詢：iPad覆蓋iphone4（視網膜）規則

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。回到標題「條件包含」。