HTML5 Mobile page Adaptive Phone screen width detailed _ Related skills

There are a lot of articles on the internet about this, repetition of things this article no longer repeat, only provide ideas, and explain some other articles about vague places.

1, the use of META tags , this is a commonly used method, in theory, the use of this tag can be adapted to all sizes of the screen, but the different devices to explain the label and the degree of support caused by the difference 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 do not understand the use of this label need to first Baidu.

Explanation: Content in the "width" this width refers to what breadth, I read the article does not explain this is very clear, 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? This is tested to refer to the width of the virtual window. After you know the width, for a variety of subsequent scale, you should know who is the proportion of WHO, is the virtual window width/page width, so there will be problems Android equipment size difference is very large light mainstream has a width of 320 480 720 1080 and other sizes and above labels can only support a size, Of course some browsers will automatically scale 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, should first get screen size.

 <script type= "Text/javascript" >
    var phonewidth = parseint (window.screen.width);
    var phonescale = phonewidth/640;
    var ua = navigator.useragent;
    if (/android (\d+\.\d+)/.test (UA)) {
      var version = parsefloat (regexp.$1);
      if (version>2.3) {
        document.write (' <meta name= "viewport" content= "width=640, Minimum-scale = ' +phonescale+ ') , Maximum-scale = ' +phonescale+ ', target-densitydpi=device-dpi ' > ');
      else{
        document.write (' <meta name= "viewport" content= "width=640, target-densitydpi=device-dpi" > ");
      }
    else {
      document.write (' <meta name= ' viewport "content=" width=640, User-scalable=no, target-densitydpi= device-dpi ">");
    }
  </script>

There are also the following needs to share for this label:

1), User-scalable=no can guarantee that the page can not zoom? No, some browsers do not eat this set, there is a trick is minimum-scale=1.0, maximum-scale=1.0 maximum and minimum scaling ratio are set to 1.0 on it.

2), initial-scale=1.0 the initial scaling ratio by user-scalable control? Not necessarily, some browsers will interpret user-scalable as user-manually scaled, if User-scalable=no,initial-scale will not take effect.

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

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

The above is the use of viewport label some of the small experience to share with you.

3, the percentage method , first should be clear about a year, the percentage of the CSS in the Hundred refers to what, I told you refers to the parent element, all percentages are the same. The child element width 50%, then the parent element width is hundred, the child element's padding-left:50%, the parent element 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) descendants of elements in a percentage positioning (or specify the size) on it, this is only suitable for simple layout of the page, complex page implementation is difficult.

4, the use of CSS3 unit REM, someone to explain this rem,root-em, is the root of the EM, presumably em everyone 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, or 1rem=16px, and you can set 2rem if a div is 32px wide. When we set the HTML Font-size to 20px, 1rem=20px, then 32px=1.6rem. Here we also understand the use of REM, so how to use REM to achieve the different size of the screen adaptive? First determine the width of the window (the Width of window ($ (window)) at the beginning of the page load. Width ()), is not the width of the screen resolution (screen.width), the difference between the two, please refer to it, assuming the width of W, a div in the width of the 640px design under the width of the dW1, so if the HTML font-size 100px, then the width of the div in rem is how much? Calculation: div width dw2=dw1/100,px and rem is a good conversion, divided by 100, which is assumed screen width of 640, and different width of the screen how to handle, in order to ensure that the conversion is easy to set a suitable font-size for HTML, calculated: 100/ 640 = fontsize/w, FontSize = w/640 * = w/6.4;

Explain why using 100 as a scaling, 10 or 1 is not more convenient, because most browsers font-size the minimum value of 12px, so only 100. So the JS code will be added to the head.

<script type= "Text/javascript" >
  var html = document.queryselector (' html ');
  var rem = html.offsetwidth/6.4;
  Html.style.fontSize = rem + "px";
</script>

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

In summary, so far, I have not found a completely adapt to a variety of screen methods, only according to the characteristics of the page to choose different methods, flexible use of a variety of methods is kingly.

Through this article, I hope to help you solve HTML5 adaptive phone screen width of the problem, thank you for the support of this site!