iPhone系列設備媒體查詢： - yanaweb－IT工程師數位筆記本

文章出處

這就引出一個問題，我們在對iPhone設備適配時候，又多出幾種情況。iPhone系列設備媒體查詢：

@media only screen and (min-device-width: 320px){
         //針對iPhone 3
}
 
@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {
         //針對iPhone 4, 5c,5s, 所有iPhone6的放大模式，個別iPhone6的標準模式
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {
//針對大多數iPhone6的標準模式
}
 
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {
//針對所有iPhone6+的放大模式
 
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {
//針對所有iPhone6+的標準模式,414px寫為412px是由于三星Nexus 6為412px，可一并處理
 
}

結論是，做移動端Web兼容測試時候，不能將Chrome模擬效果同iPhone6/Plus真機完全劃等號。一定要在確認了iPhone設備所處顯示模式和真實屏寬后再針對性的進行調試。

退一步說，姑且認為標準模式和放大模式下設備寬度都是320px的情況屬于個例。不過在沒有確認iPhone6/iPhone 6 Plus是處于標準模式還是放大模式的前提下，來測試CSS媒體查詢代碼，來查看真機預覽效果，都是不靠譜的做法。因此，在未確認設備顯示模式的情況下，這個結論是完全成立的：iPhone6屏寬不一定是375px，iPhone6 Plus屏寬不一定是414px。

原創文章來自CSDN freshlover的空間 http://blog.csdn.net/freshlover/article/details/44454991

文章列表