How mobile WebApp handle different screen sizes

Mobile device users more and more, the daily activation of Android phone has more than 1.3 million units, so we face the mobile Terminal WebApp also began to follow. This paper mainly introduces the relevant knowledge and experience of webapp development and debugging, and gives several optional solutions.

I. Basic concepts (1) CSS pixels and device pixels

CSS Pixels: The abstract unit used by the browser, used primarily to draw content on a Web page.

Device pixels: Displays the smallest physical unit of the screen, with each DP containing its own color and brightness.

The equivalent CSS pixels on the phone screen, which is not fixed, depending on a lot of properties.

(2) ppi/dpi

The PPI, sometimes called dpi, represents the number of pixels (pixel) per inch, the higher the value, which means that the display can display the image at a higher density. (Note: The pixels here refer to device pixels.) Figuring out what the PPI means, we can easily understand how the PPI is calculated, we need to figure out the diagonal equivalent of the cell phone screen, and then we can get the PPI by the diagonal (the length of the diagonal of the phone screen, which is what we normally call screen size). Accurate calculation of the publicity can be referred to. Interestingly, the PPI for the iphone 4, based on the formula, is 330, a little higher than the official Apple announcement of 326.

Similarly, with HTC G7 as an example, the resolution of 480*800, 3.7 inches, is calculated to be 252 ppi.

(3) Density determining ratio

We calculate the PPI in order to know what density range a mobile device belongs to, because different density intervals correspond to different default scaling ratios, which is an important concept.

By the know, the PPI in the 120-160 between the cell phone is classified as low-density mobile phones, 160-240 is classified as medium density, 240-320 is classified as high density, more than 320 is classified as ultra-high density (Apple gave it an upper name--retina).

These densities correspond to a specific scaling value, and the PPI is 326 for ultra-high-density phones, as we are most familiar with iphone4 or 4s. When we write a page with a width of 320px and put it on the iphone, you'll find that it's full-width. This is because the page is magnified by default by twice times, that is, 640px, and iphone4 or 4s width, it is 640px.

The high-density category is circled because it is an Android phone statistics, in the domestic Android phone market, high-density equipment accounted for the majority of the market share, this is very important, but also we do the Android Terminal WebApp to pay attention to the key points.

(4) Use of viewport

Viewport a total of 5 properties, respectively:

<meta name="viewport"content="height = [ pixel_value |device-height] ,width = [ pixel_value |device-width ] ,initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value ,user-scalable =[yes | no] ,target- densitydpi = [ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] " />

Within these attributes, we focus on ' target-densitydpi ', which can change the default scaling of the device. ' medium-dpi ' is the default value of ' target-densitydpi ', and if we explicitly define ' target-densitydpi=device-dpi ', then the device renders the page at a real dpi. For example, a ' 320*480 ' picture, placed in the iphone4, the default is full screen, but if the definition of ' target-densitydpi=device-dpi ', then the picture only occupies One-fourth of the screen (One-second Square), Because the resolution of the iphone4 is ' 640*960 '.

Ii. Solutions (1) Simple rough

If we make the page in 320px wide design, and do not make any settings, the page will automatically zoom to the width equal to the phone screen (this is because MEDIUM-DPI is the default value of target-densitydpi, and the different densities correspond to different scaling ratios, All of this is done automatically by mobile devices). So this solution is simple, rough and effective. But there is a fatal drawback, for high-density and ultra-high-density mobile devices, pages (especially pictures) will be distorted, and the more dense, the more distorted.

(2) Ultimate Perfection

In this scenario, we use ' target-densitydpi=device-dpi ', so that the mobile device will be rendered according to the actual number of pixels, in professional terms, is 1 CSS pixels = 1 device pixels. For example, for the ' 640*960 ' iphone, we can make a ' 640*960 ' page that doesn't have a scroll bar on the iphone. Of course, for other devices, you also need to make different sizes of pages, so this approach is often used media queries to form a responsive page. This scenario can be perfectly presented at a specific resolution, but as more resolutions are compatible, the cost is higher because individual code needs to be written for each resolution. Here's a simple example:

<meta name="viewport"content="target- densitydpi =device-dpi, width=device-width " />#header {background:url (medium-density-image.png);}@media screen and (- webkit -device-pixel-ratio:1.5) {/* CSS for high-density screens */#header { background:url (high-density-image.png);}}@media screen and (- webkit -device-pixel-ratio:0.75) {/* CSS for low-density screens */#header { background:url (low-density-image.png);}}

(3) Reasonable compromise

The vast majority of Android devices are high density, part of the density of the features, we can use a compromise solution: we have 480px wide design manuscript to restore, but the page is made of 320px wide (using background-size to reduce the image), and then, Let the page scale automatically by scaling. This way, low-density mobile phones have a scroll bar (which is basically no longer used), the density of mobile phones will waste a little bit of traffic, high-density mobile phone perfect, ultra-high-density mobile phone slightly distorted (ultra-high-density Android phone very few). The advantages of this scheme are obvious: only a set of design drafts, a set of code (only consider the situation of Android phones).

How mobile WebApp handle different screen sizes (RPM)