【Original】iphone6 ​​is coming, what should I do_html/css_WEB-ITnose

At 1 a.m. on September 10, 2014, Beijing time, Apple officially released its new generation product iPhone6. I believe that students who are engaged in web app development are full of curiosity and anticipation for it, and are also worried about what it will bring. There are all kinds of tricks, high-definition resolution, and upgraded retina display. How should we adapt?

Compared with iPhone5, iPhone6 ​​has a higher resolution retina HD display, and the pixel density of iPhone6 ​​plus has reached 406ppi, which is an increase of 25% compared to the original 326ppi. , the device pixel ratio increases from the original 2.0 to 2.6 (the number of pixels on the screen of the same size increases from one to 6.76), and the display screen details are richer.

Regarding the principles of retina display screens, I have previously written an article "HD Display Principles and Design Plans", which I recommend everyone to read.

The high-definition resolution (1920*1080) of iPhone6 ​​plus is worrying, but in fact such devices have long been on the market, such as Samsung's Galaxy S4 (resolution: 1920x1080; device pixel ratio: 3.0 ), but the number of users is not huge. The webpp development also started from the original iPhone 4 design draft of 960*640 to ensure the normal display of the content. The emergence of iPhone6 ​​plus is a further push for it, and it is undoubtedly a new challenge for vision and front-end.

So, do we need to make a separate set of adaptations specifically for the iPhone 6 plus 1920*1080 page?

Let us first take a look at the mobile industry data report for the second quarter of 2014 analyzed by Tencent Cloud. The data covers more than 1.5 billion devices, which is very valuable for reference. First understand the android screen resolution Rate ranking:

It can be seen that large-screen mobile phones are the future trend. Even so, minus the proportion of large-screen mobile phones, the proportion of other android mobile phones is 61.5 %, which means that narrow-screen mobile phones currently account for the vast majority. Let’s look at the proportion of high-end ihpone machines:

iPhone 4 still has the largest number of users, and it cannot be ignored. value. Although large-screen mobile phones are the trend, our visual draft should be adapted to most devices. According to the current data, 960*640 or 1136*640 are still the specifications we designed, starting from the devices with the largest number of users. Design, large-screen mobile phones display normally, are forward compatible and backward compatible, which can solve most problems.

Then, the requirements for the visual draft are relatively high. If you design a set of pages that display well on all ios and android devices, there is no need to adapt to iPhone6; if the display effect is average (For example, the content is too small on large-screen mobile phones), the page needs to be further adapted, which can be understood as what we often call responsive design.

Here, the author came up with a method based on recent information, using CSS media queries for compatibility. This is for reference only. If there are any problems, we have to wait for the iPhone 6 machine to be tested. The article will be updated with feedback. Everyone~

@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone 6 */.class{}}@media (device-width:414px) and (-webkit-min-device-pixel-ratio:2.6){/* 兼容iphone6 plus */.class{}}

To adapt to this matter, you still need to combine it with the specific project, look at the boss’s face, and look at the user’s thoughts. In short, from a development perspective, do it in advance Be prepared to ensure the quality and experience of the product. Maybe your boss will give you a raise at the end of the year~

Regarding the compatibility of iPhone4 and iPhone5, I previously wrote an article "Methods for Compatibility with iPhone4 and iPhone5"

Reference:

iphone-6/specs

retina HD display

Confirmed iPhone 6 and 6 Plus viewport device-width

iPhone 6 and 6 Plus Responsive Breakpoints