Web App iphone4 iphone5 iphone6 Responsive Layout Code

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.