iphone series Device Media query:

This begs the question, and we have several more things to do when it comes to adapting the iphone device. iphone series Device Media query:

@media only screen and (min-device-width:320px) {         //For iphone 3} @media only screens and (min-device-width:320px) and (- Webkit-min-device-pixel-ratio:2) {         //For iphone 4, 5c,5s, all iPhone6 magnification modes, individual IPhone6 Standard mode} @media only screen and ( min-device-width:375px) and (-webkit-min-device-pixel-ratio:2) {//For most iPhone6 Standard mode} @media only screen and ( min-device-width:375px) and (-webkit-min-device-pixel-ratio:3) {//For all iphone6+ magnification modes} @media only screen and ( min-device-width:412px) and (-webkit-min-device-pixel-ratio:3) {//For all iphone6+ standard mode, 414px write 412px is due to Samsung Nexus 6 412px , can be processed together}

　　

The conclusion is that when doing a mobile Web compatibility test, you can't equate the chrome simulation with the Iphone6/plus real machine. Be sure to check the iphone device display mode and the actual screen width after the targeted debugging.

In other words, it is a case to assume that the width of the device is 320px in both standard and magnification modes. However, in the absence of confirmation Iphone6/iphone 6 Plus is in the standard mode or magnification mode, to test the CSS Media query code, to see the real-computer preview effect, is not a reliable approach. Therefore, in the case of not confirming the device display mode, this conclusion is fully established: IPhone6 screen width is not necessarily 375px,iphone6 plus screen width is not necessarily 414px.

Original article from Csdn Freshlover's space http://blog.csdn.net/freshlover/article/details/44454991

iphone series Device Media query: