Two common solutions

• 1. Dynamically set the width and initial scale of the viewport

• 2. The solution of rem is to dynamically set font size with element Html

Method 1: meta viewport

You are familiar with the meta tag. First, let's look at the six properties of the meta viewport:

Generally, the width value is set to width device, that is, the screen width of the current device. We can get it through window.screen.width. So to adapt to different mobile phones, we need to dynamically change the initial scale and set user scale = no to prevent users from manually scaling the page.

For example: if the size given by the designer is 750px, how to scale the design drawing of 750px to the current width of our mobile phone? If the screen width of the current mobile phone is exactly 750px, then the initial scale is equal to 1, so there is no need to zoom at all. If the current cell phone width is 375px (iPhone 6 / 7 / 8), wouldn't you like to double the scale (initial scale = 0.5), yes, the multiple of scaling is equal to the current cell phone screen width divided by the width of the design drawing. If the designer gives a 640px wide picture, what is the value of initial scale for different mobile phones? The answer is in the last sentence.

Therefore, the value of initial scale is obtained dynamically and then the meta tag is added to the header tag, which requires the use of js to operate the dom (js basic knowledge). See the following code example:

<script>
    var _vwidth = window.screen.width;
    var _scale = _vwidth / 750;
    var _meta = document.createElement('meta');
    _meta.setAttribute('name', 'viewport');
    _meta.setAttribute('content', ' width = device - width , user - scalable = no , initial - scale = ' + _scale);
    document.getElementsByTagName('head')[0].appendChild(_meta);
</script>

Then we can write css according to the size given in the design drawing. If it's 28px, we'll write 28px, if it's 750px, we'll write 750px (of course, it can also write 100%).

Method 2 rem layout

//Design width: the actual width value of the design draft, which needs to be set according to the actual situation
//maxWidth: the maximum width of the draft, which needs to be set according to the actual situation
//There are two parameters at the back of this js, one is the actual width of the design draft and the other is the maximum width of the production draft. For example, if the design draft is 750 and the maximum width is 750, then it is (750750)
//Unfortunately, if it's the design size of the iPhone x (1125), this method doesn't work
(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 can only be executed after the wiewport is set, otherwise refreshRem will be executed twice;
    refreshRem();

    win.addEventListener("resize", function() {
        clearTimeout(tid); //Prevent execution twice
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // Recalculate when browser goes back
            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);

In the project development, choose the application according to the actual situation. At the same time, don't forget to set a series of meta tags. You can also use flex flexible layout