How to develop adaptive page quickly according to the size of design drawing

Keywords: Mobile Attribute

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:

Attribute name explain
width Set the width of the viewport to a positive integer, or the string "width device"
initial-scale Set the initial zoom value of the page as a number with decimal
minimum-scale The minimum scale value allowed for the user, which is a number and can be decimal
maximum-scale The maximum zoom value allowed for the user, which is a number and can be decimal
user-scalable Allow users to zoom or not, the value is "no" or "yes", no means not allowed, yes means allowed
height Set the height of the viewport. This property is not important. It is rarely used

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:

    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);

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"),

    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) {
    } else {
        var wrap = doc.createElement("div");
        wrap = null;
    //refreshRem can only be executed after the wiewport is set, otherwise refreshRem will be executed twice;

    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
            tid = setTimeout(refreshRem, 300);
    }, false);

    if (doc.readyState === "complete") { = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
   = "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

Posted by hmemnon on Tue, 05 Nov 2019 01:55:04 -0800