Mobile end H5 development of adaptive skills

H5 mobile terminal development, necessary to do a variety of adaptive resolution of the phone, below me as we generally talk about, we need to take three steps

 

First: head tag added:

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

 Explanation of each parameter:

     width: the width of the visible region, may be a digital value or keyword device-width

     height:同width

     intial-scale: the page is first displayed is the zoom level of the visible area, the value of 1.0 according to the actual page size display without any scaling

     maximum-scale = 1.0, minimum-scale = 1.0; zoom level of the visible area,

     maximum-scale amplification of the page the user can program, enlarged to 1.0 prevents the user on the actual size.

     user-scalable: whether a page zoom, no zoom ban

 

Second: JS dynamically acquired width and height of the screen, with the units used rem

  (function(designWidth, maxWidth) {
               var doc = document,
                   win = window,
                   docEl = doc.documentElement,
                   remStyle = document.createElement("style"),
                   tid;
           
               function refreshRem() {
                   var width = docEl.getBoundingClientRect().width;
                   maxWidth = maxWidth || 540;
                   width > maxWidth && (width = maxWidth);
                   var rem = width * 100 / designWidth;
                   remStyle.innerHTML = "html{font-size:" + rem + "px;}"
               }
               if (docEl.firstElementChild) {
                   docEl.firstElementChild.appendChild(remStyle)
               } else {
                   var wrap = doc.createElement("div");
                   wrap.appendChild(remStyle);
                   doc.write(wrap.innerHTML);
                   wrap = null
               }
               refreshRem();
               win.addEventListener("resize", function() {
                   clearTimeout(tid);
                   tid = setTimeout(refreshRem, 300)
               }, false);
               win.addEventListener("pageshow", function(e) {
                   if (e.persisted) {
                       clearTimeout(tid);
                       tid = setTimeout(refreshRem, 300)
                   }
               }, false);
               if (doc.readyState === "complete") {
                   doc.body.style.fontSize = "16px"
               } else {
                   doc.addEventListener("DOMContentLoaded", function(e) {
                       doc.body.style.fontSize = "16px"
                   }, false)
               }
           })(750, 750);

The following parameter is the UI 750 of the design parameters, with the rem units can be directly used, it can js a package file, to be imported directly when

 

Third: HTML used in rem

　　remCSS3 is relatively new unit of length with respect to the root element refers to htmlthe font-sizesize of the calculated value. Understood as a simple percentage of the screen width.