Web App iphone4 iphone5 iphone6 iphone6 plus responsive Layout adapter code

In the Web page, the pixel and point ratios are called device-pixel-ratio, and the normal devices are 1,iphone 4 is 2, and some Android models are 1.5. ]

Then-webkit-min-device-pixel-ratio:2 can be used to differentiate between the iphone (4/4S/5) and other phones

The iphone4/4s resolution is 640*960 pixels,dpi is 320*480 and the device height is 480px

IPhone5 resolution of 640*1136 pixels,dpi is still 320*568, the device height is 568px

IPhone6 resolution of 750*1334 pixels,dpi is still 375*667, the device height is 667px

IPhone6 Plus has a resolution of 1242x2208 PIXELS,DPI remains 414*736 with a device height of 736px

Then we just have to judge the Device-height (device high) value of the iphone to differentiate between IPhone4 and IPhone5, IPhone6, IPhone6 Plus

Using CSS

With CSS3 's Media Queries feature, you can write code that is compatible with IPhone4 and IPhone5, IPhone6, and IPhone6 plus ~ ~

Way one, write directly into the style inside

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2) {/* Compatible with iphone4/4s */    . class{}} @media ( device-height:568px) and (-webkit-min-device-pixel-ratio:2) {/* compatible iphone5 *    /. class{}} @media (Device-height : 667px) and (-webkit-min-device-pixel-ratio:2) {/* compatible Iphone6 */    . class{}} @media (DEVICE-HEIGHT:736PX) and (- WEBKIT-MIN-DEVICE-PIXEL-RATIO:2) {/* compatible with iphone6 Plus */    . class{}}

Mode two, link to a separate style sheet, put the following code in the

<link rel= "stylesheet" media= "(device-height:480px) and (-webkit-min-device-pixel-ratio:2)" href= "Iphone4.css"/ ><link rel= "stylesheet" media= "(device-height:568px) and (-webkit-min-device-pixel-ratio:2)" href= " Iphone5.css "/><link rel=" stylesheet "media=" (device-height:667px) and (-webkit-min-device-pixel-ratio:2) " href= "Iphone6.css"/><link rel= "stylesheet" media= "(device-height:736px) and (-webkit-min-device-pixel-ratio : 2) "href=" Iphone6p.css "/>

Using JS

Determine whether the iphone 4 or iphone 5 or iphone 6, iPhone6 plusisphone4inches = (window.screen.height==480); isphone5inches = ( window.screen.height==568); isphone6inches = (window.screen.height==667); isphone6pinches = (window.screen.height== 736);

Web App iphone4 iphone5 iphone6 iphone6 plus responsive Layout adapter code