Mobile page Adaptive Phone screen width

In the Baidu Library to see a mobile page on the adaptation of the screen width of the mobile phone, feel very good, collect a bit.

1, the use of META tags , this is also a common use of the method, in theory, the use of this label can be adapted to all sizes of the screen, but the device to the label interpretation and the level of support is not compatible with all browsers or systems.

First explain the meaning of the label:

<meta name= "viewport" content= "width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no "/>

If you completely do not understand the use of this label need to first Baidu a bit.

Explanation: Content of "width" This width refers to what breadth, I read the article on this is not explained very clearly, there are several alternatives: the width of the virtual window, the width of the phone screen, or the width of the page, and so on? By experiment this refers to the width of the virtual window. After understanding the width, to follow the various scales, you should know who is the proportion of the virtual window width/page width, so there will be a problem with Android device size difference is very large light mainstream has a width of 320 480 720 1080 a variety of dimensions and the above label can only support one size, Of course some browsers will automatically zoom to adapt to the screen, but this is not a unified standard, the correct way is to use JS dynamic generation of this tag , of course, you should first get the screen size.

For this label there are also the following needs to share:

1), User-scalable=no must be able to ensure that the page can not be scaled? No, some browsers do not eat this set, there is a trick is minimum-scale=1.0, maximum-scale=1.0 maximum and minimum zoom ratio are set to 1.0.

2), initial-scale=1.0 the initial scaling ratio is controlled by user-scalable? Not necessarily, some browsers will understand user-scalable as user manual scaling, if User-scalable=no,initial-scale will not take effect.

3), mobile phone page can touch mobile, but if you need to prohibit this operation, that is, the page width is equal to the screen width is the page just fit the screen to ensure that the page can not move.

4), if the page is reduced to fit the screen width, there will be a problem, when the text box is activated (get focus), the page will be enlarged to the original size.

The above is the use of viewport label some small experience, share to everyone.

2, the second adaptive screen size method is to make the page 980 width , in the absence of viewport tag, the mobile device screen range will show the width of page 980, if the page is greater than 980, the screen is displayed in the range of part, if the page is less than 980, The center side of the page appears blank, so you guess what happens if the page width equals 980?

3, the percentage method , the first should be clear about a year, the percentage of the CSS in the percent of what is, I tell you that refers to the parent element, all percentages are like this. The child element width 50%, then the parent element's width is hundred, the child element's padding-left:50%, the parent element's width is hundred, the child element's margin-top:20%, then the parent element's height is hundred. So the body default width is the screen width (the PC middle finger is the browser width) descendant elements are positioned as a percentage (or a specified size), which is only suitable for layout-simple pages, and complex page implementations are difficult.

4, use CSS3 unit rem, some people explain rem,root-em, is the root of the EM, presumably em all understand, then REM is the root node HTML font-size value as the base size of the entire page, The default HTML font-size is 16px, that is 1rem=16px, if a div width of 32px you can set to 2rem. When we set the HTML Font-size to 20px, 1rem=20px, then 32px=1.6rem. Here we also understand the use of REM, then how to use REM to achieve the different size of the screen adaptive? The width of the window, which is the width of window ($ (window)), is first determined at the beginning of page loading. It is not the width of the screen resolution (screen.width), the difference between the two, please see for yourself), if the width is W, a div in the width of 640px design of the width of dW1, so if the HTML font-size is 100px, then the width of the div is the number of REM? Calculation: div width dw2=dw1/100,px and rem good conversion, divided by 100, which is assumed to screen width of 640, and different width of the screen how to deal with, in order to ensure that the conversion is easy it is necessary for HTML to set a suitable font-size, calculated: 100/ 640 = fontsize/w, fontSize = w/640 * = w/6.4;

Explain why the 100 as a scale, 10 or 1 is not more convenient, because most browsers font-size the minimum value of 12px, so can only use 100.

5, Media query, media query is also CSS3 method, we want to solve the problem is to adapt to the mobile phone screen, this media query is to solve this problem, the function of media query is to set different CSS style for different media, here "media" including page size, Device screen size, such as we want to the width of less than 480px of the page class= "icon" elements of the style, you can write this, @media screens and (max-width=480px) {. icon{some styles}}; This is the only way of thinking, please refer to the CSS manual for the detailed usage of media queries.

So far, I have not found a way to fully adapt to the various screens, only according to the characteristics of the page to choose different methods.

Mobile page Adaptive Phone screen width