HTML5 mobile terminal of the adaptive solution

Since the movement of the contact end H5 page, never stop exploring on page H5 adaptation solutions of different screens. From the initial bootstrap response frame to do the phone adapter; then try to do as a percentage of H5 adaptation; and then went to try to media queries, but the move ends a different screen size, the models have a variety of sizes, it is difficult do different phone adapter, then see Jingdong, Netease, etc. to use hand wash rem make phone adapter, front-end developers can use rem easily in a variety of screen sizes, making the effect of design requirements. This article focuses on adaptive illustrate the different mobile terminal solutions as well as the advantages and disadvantages rem as a mainstream movement principle and the use of the adaptive scheme layout scheme.

1. Using rem to make phone adapter

What is rem

rem is the relative length css3 new unit means relative to the root html font-size value of the size of the element

Extended: em is a unit relative lengths css, em font-size as a unit, which represents the font size of the parent element, when em as other attributes, the representation itself font size

rem adaptation principle

rem is the nature of the layout of the adapted geometric scaling, according to a different width of the screen, at the same rate dynamically modified html font-size value, there is no relationship between the size of the design with it gives the designer is given regardless of the design of FIG. is 480,720,750,1080, all the draft design geometric scaling on the device; font-size value then the root of html is how to calculate it?

NetEase embodiment is a screen width as the design width ratio of the size of the font-size, but this time the calculated value is smaller than the font-size 12px cause some errors and strange problem, for which we scaled to 100-fold, i.e., , the root html font-size value = the screen width / design width 100 * in order to scale-invariant, the corresponding element in the design of the process becomes rem divided by 100;
Ali solution is scale ratio setting device pixel value holding device-width viewport apparatus according always equal physical pixels, then according to the screen width / 10 dynamically calculates the size of the root html font-size, how to design draft pixel unit into rem is a unit with it? Can be used to calculate the proportion of a particular design is divided into 100 parts, per a width represented by a, while identified as 1 rem units 10a, i.e. 1rem = 10a; 750px width as the draft design, this time:

750px=100a --- 1a=7.5px

1rem=10a --- 1rem=75px

Similarly, if the total width is 640px by design draft, the 1rem = 64px.

rem adaptation scheme

(function(doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth;
      if(!clientWidth) return;
      docEl.style.fontSize = (clientWidth / 7.5) + 'px';
    };
  if(!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

Millet mobile terminal scheme (based on the design of FIG. 720)

! Function (E) {
     var T = e.document, 
        n- = t.documentElement, 
        I = || e.devicePixelRatio. 1 , 
        A = "orientationChange" in E "orientationChange":? "A resize" , 
        D = function () {
             var E = n.getBoundingClientRect () || width 360;. //   Element.getBoundingClientRect () method returns the size of the element and position relative to the viewport. 
            (1 == i || e> 720 ) && (e = 720), n.style.fontSize = e / 7.2 + "px" // millet ah is 6 * 720 design are Andrews 1280 Interface 
        }; 

    n-. setAttribute ( ", i),
    t.addEventListener && (e.addEventListener(a, d, !1), "complete" === t.readyState ||
    t.addEventListener("DOMContentLoaded", 
        function() { 
            setTimeout(d)
        }, !1)
    )

} (window)

moving end flexible scheme

; ( Function (win, lib) {
     var DOC = win.document;
     var docEl = doc.documentElement;
     var METAEL = doc.querySelector ( 'Meta [name = "the viewport"]' );
     var flexibleEl = doc.querySelector ( ' Meta [name = "flexible"] ' );
     var DPR = 0 ;
     var Scale = 0 ;
     var TID;
     var flexible lib.flexible = || (lib.flexible = {}); 
    
    IF (METAEL) { 
        console.warn ( 'the scale is set according to the existing meta tags' );
         var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));    
            }
        }
    }

    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio =win.devicePixelRatio;
         IF (isIPhone) {
             // at the iOS, 2 and 3 for the screen, with 2 program, the remaining time with a program 
            IF (devicePixelRatio> = 3 && (DPR DPR ||> = 3! ) ) {                 
                DPR =. 3 ; 
            } the else  IF (devicePixelRatio> = 2 && (DPR DPR ||> = 2! )) { 
                DPR = 2 ; 
            } the else { 
                DPR =. 1 ; 
            } 
        } the else {
             // other devices, still using scheme 1 times 
            DPR = 1 ; 
        } 
        Scale =. 1 / DPR;
    }

    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }
    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

    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 = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }
 
    refreshRem();
    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }

})(window, window['lib'] || (window['lib'] = {}));

Phone Taobao adaptation scheme (based design 750)

!function(e, t) { 
    var n = t.documentElement,
        d = e.devicePixelRatio || 1; // 设备DPR
    function i() { 
        var e = n.clientWidth / 3.75; // iPhone 6 布局视口375
        n.style.fontSize = e + "px" 
    } 
    if (function e() { t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e)}(),
        i(),
        e.addEventListener("resize", i), 
        e.addEventListener("pageshow", function(e) { e.persisted && i() }), d >= 2){
        var o = t.createElement("body"), a = t.createElement("div");
        a.style.border = ".5px solid transparent", o.appendChild(a), n.appendChild(o), 
        1 === a.offsetHeight && n.classList.add("hairlines"), n.removeChild(o) 
    } 

}(window, document)

2. vw / vh

vw / vh based Viewport window length unit, where the windows (Viewport) refers to the visual browser area, the unit comprising the viewport 4

vw: 1vw equal to 1% of the width of the viewport
vh: 1vh equal to 1% of the height of the viewport
vmin: Select vw and vh smallest of
vmax: Select vw and vh the largest

If your design width 750px from vw, the VH In principle 100vw = 750px, i.e. 1vw = 7.5px, we can convert to a value vw corresponding to the value of the design according to FIG px; vw adapted to be used our place page:

A container adapted to be used vw
Adaptation of the text, you can use vw
Greater than 1px border, rounded corners, shadows can be used vw
Distance from the inner and outer may be used vw

Compatibility issues (at end mobile iOS 8 and Android 4.4 and above for support, and also to get the perfect full support in a letter x5 micro kernel), so there are a variety of models there will be compatibility problems, these are not considered compatible if issues, you can safely use vw.

3. Percentage

The percentage do mobile adaptation of the method is a child element relative to what percentage of the parent element, made of adapting the mobile phone side, the overall layout of the screen to zoom in and different, but the characters and locations within the element is difficult to achieve amplification on different screens and reduce the percentage layout is only suitable for simple page layout, customized requirements are relatively high complexity of the page implementation is difficult.

4 media queries

Media queries are used in mobile phones early adaptation scheme, carried out by the width of the device query different css code that shows the UI design; maintenance of more use when the same set of codes for mobile and PC, for example, do Bootstrap responsive layout when , the bottom is used media queries. The program drawback is larger than the code, maintenance inconvenient, can not meet the results do customization requirements, and to take into account the respective mobile terminal and PC terminal-specific interaction can not be used alone.

to sum up

With the development of mobile terminals will be more adaptation scheme, the current mainstream mobile phones do still rem end of the adapter, as browser support for the vw, vw make use of the adapter end of the phone is a good choice, if you are worried about your mobile terminal project has better compatibility and better adapted to different devices, please select rem as your adaptation scheme, if not consider the compatibility issues vw can be used as your program, your company require the use of mobile responsive layout and PC maintenance with a code, you can consider reducing the workload of media queries based adaptation scheme plus less and sass. The percentage do phone adapter can only do simple page.