Web App iphone4 iphone5 iphone6 Responsive Layout 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 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 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 if the iphone 4 or iphone 5 or iphone 6, IPhone6 Plus

Isphone4inches = (window.screen.height==480);

Isphone5inches = (window.screen.height==568);

Isphone6inches = (window.screen.height==667);

Isphone6pinches = (window.screen.height==736);

Web App iphone4 iphone5 iphone6 Responsive Layout Code