Web App iphone4 iphone5 iphone6 Responsive Layout Code

Now the full Street app, in addition to the game, software graphics need to use native development better. Now most still based on WebApp or mixed hybrid app, we all know that the small application of information can actually be competent, of course, if you want to call some devices, native app hybrid app is also a good choice. But our main character today is the WEB app,web APP benefit is, anytime and anywhere can see, simple and practical. for development, but also low-cost efficiency, of course, for the pursuit of meticulous ... It's a little bit ..... Okay, let's see how the Web App differentiates iphone 4 5 6.

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 resolution for the iphone4/4s is 640*960 pixels,dpi is 320*480, the device height is 480pxiphone5 resolution for 640*1136 pixels,dpi is still 320* 568, device height for 568pxiphone6 resolution of 750*1334 PIXELS,DPI remains 375*667, device height for 667pxiphone6 Plus resolution for 1242x2208 PIXELS,DPI remains 414* 736, device height is 736px

Then we just need to determine the iphone Device-height (device high) or device-width (device width) value can be distinguished 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

<Linkrel= "stylesheet"Media= "(device-height:480px) and (-webkit-min-device-pixel-ratio:2)"href= "Iphone4.css" /><Linkrel= "stylesheet"Media= "(device-height:568px) and (-webkit-min-device-pixel-ratio:2)"href= "Iphone5.css" /><Linkrel= "stylesheet"Media= "(device-height:667px) and (-webkit-min-device-pixel-ratio:2)"href= "Iphone6.css" /><Linkrel= "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 Responsive Layout Code