iPhone系列裝置媒體查詢：

標籤：

這就引出一個問題，我們在對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

iPhone系列裝置媒體查詢：