A summary of different Apple Mobile Media query common on the mobile side

In the mobile site, I often use a percentage of the layout, but often in different mobile phone display of the different

For example, the same thing, in iphone4 (s), 5 (s), 6, plus will have different display

Sometimes want to have to do for a phone alone to do some effect, to meet the requirements of different customers

At this time, the most convenient, I think it should be CSS3 media query instead of using JavaScript to judge

Roar ... It's very convenient!!

Below, is my summary of some common media query code, hope to help ~ dry!!

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/*compatible with iphone4/4s*/}@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/*compatible with iphone5*/}@media (DEVICE-HEIGHT:667PX) and (-webkit-min-device-pixel-ratio:2){/*compatible with Iphone6*/}@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/*compatible with iphone6+*/}@media All and (Orientation:landscape){/*body {Overflow:hidden;} . onResize {Display:block;position:fixed;top:0;left:0;width:100%;z-index:999;background:url (..    /images/bodybg.jpg) #ccc Center repeat;}    . onResize img {width:50%;margin:10% auto;display:block;} This is to the phone in the horizontal screen, pop up a picture, let the browser count the phone to see, the style can define yo*/}

This is the usual number of calls, the other I slowly collect ~

A summary of different Apple Mobile Media query common on the mobile side