Mobile-side layout best Practices (VIEWPORT+REM)

Through the two blogs that were written a few days ago (talking about the difference between mobile and mobile EM and REM), let's summarize how to achieve the best solution for the viewport.

As mentioned in the second blog post, we can use media queries to target different devices and make adaptations, such as

But this may not be too accurate, for example, my device layout viewport may be 370px, so you can only use this version of 320. In fact, their viewport are not the same, so they have different layouts. This means that if we use CSS media queries can only be used, but not best practice. In fact, by looking at some of the mobile website, you can see what they have in common, they are using the JS way to achieve.

As you can see, the web and the top ten H5 pages we're doing today, the common place is to set DATA-DPR and font-size on the root HTML.

Why do you have to set these two things?

We can go back to the nature of the mobile side, is to plan different layouts according to different equipment, there is a point to note, that is, any resolution of our fonts to be consistent. So DATA-DPR is set for fonts, and font-size is the baseline value for REM on different devices. In fact, there is a standard JS file can help us solve the above problems, flexible.js (can go to GitHub copy) basically meet our needs.

;(function(Win, Lib) {varDoc =win.document; varDocel =doc.documentelement; varMetael = Doc.queryselector (' meta[name= "viewport"]); varFlexibleel = Doc.queryselector (' meta[name= "flexible"]); varDPR = 0; varScale = 0; varTid; varFlexible = Lib.flexible | | (lib.flexible = {}); if(Metael) {Console.warn (' Scaling is set according to the existing META tag '); varMatch = Metael.getattribute (' content '). Match (/initial\-scale= ([\d\.] +)/); if(match) { scale= Parsefloat (match[1]); DPR= parseint (1/Scale ); }    } Else if(flexibleel) {varContent = Flexibleel.getattribute (' content '); if(content) {varINITIALDPR = Content.match (/initial\-dpr= ([\d\.] +)/); varMAXIMUMDPR = 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 ) {        varIsandroid = Win.navigator.appVersion.match (/android/gi); varIsiphone = Win.navigator.appVersion.match (/iphone/gi); varDevicepixelratio =Win.devicepixelratio; if(isiphone) {//iOS, for 2 and 3 screen, with twice times the scheme, the remaining 1 time times the scheme            if(Devicepixelratio >= 3 && (!DPR | | DPR >= 3) ) {DPR= 3; } Else if(Devicepixelratio >= 2 && (!DPR | | DPR >= 2) ) {DPR= 2; } Else{DPR= 1; }        } Else {            //Other devices, still using 1 time times the schemeDPR = 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 {            varWrap = doc.createelement (' div ');            Wrap.appendchild (Metael);        Doc.write (wrap.innerhtml); }    }    functionRefreshrem () {varwidth =docel.getboundingclientrect (). width; if(Width/dpr > 540) {width= 540 *DPR; }        varREM = 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= * DPR + ' px '; } Else{Doc.addeventlistener (' Domcontentloaded ',function(e) {doc.body.style.fontSize= * DPR + ' px '; }, false);    } refreshrem (); FLEXIBLE.DPR= WIN.DPR =DPR; Flexible.refreshrem=Refreshrem; flexible.rem2px=function(d) {varval = parsefloat (d) * This. rem; if(typeofD = = = ' String ' && d.match (/rem$/) ) {Val+ = ' px '; }        returnVal; } Flexible.px2rem=function(d) {varval = parsefloat (d)/ This. rem; if(typeofD = = = ' String ' && d.match (/px$/) ) {Val+ = ' rem '; }        returnVal; }}) (Window, window[' Lib ' | | (window[' lib '] = {}));

Simply say the key in this, we first set the page viewport in the scale, this is used to solve the border 1px problem, here is one of my CSS demo

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <Metaname= "Viewport"content= "Width=device-width, User-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <title>Document</title>    <style>ul Li{width:100px;padding:8px 0 8px 15px;Color:#7c7c7c;position:relative;        }ul Li + li:before{position:Absolute;Top:-1px; Left:0;content:"';width:100%;Height:1px;Border-top:1px solid #ddd;            /*Transform:scaley (0.5);*/        }    </style></Head><Body>    <ul>        <Li></Li>        <Li></Li>        <Li></Li>    </ul></Body></HTML>

And then the style we showed below is the first one to comment out Transform:scaley (0.5) and the second one to open.

Why is this, I am talking about mobile end three big viewport said, DPR for 2 HD screen, 1 css pixels = 4 physical pixels (1px = DPR2*DP)

So, the designer wants the retina border: 1px; is actually 1 physical pixel width, for CSS, it can be considered border: 0.5px; , this is the HD screen under (dpr=2) can display the smallest unit, but not all browsers support border:0.5px, So we need scale (0.5), which is the scale mentioned above Flexible.js, to set different scale by different DPR (Devicepixelratio).

Then our protagonist REM is obtained through the Docel.getboundingclientrect (). Width of the Refreshrem function, This value is the same as Document.body.clientWidth, which is the layout viewport, after which the WIDTH/10 is purely for ease of calculation. Wait, when we look at the layout viewport under Iphone5, why is 640, not 320,

This is because we set the scale in front, under Iphone5, by getting DPR (Devicepixelratio) is 2, And then calculated that Initial-scale is 0.5, because in Initial-scale for 1 cases, we know that the layout viewport equals the device width, which is equal to the ideal viewport (screen.width), iphone5 the ideal viewport is 320, and then the scaling ratio is 0.5, so the most The final layout viewport is 640. Mobile Great God PPK once said that Initial-scale is the ideal viewport and visual viewport ratio, but I feel that since the setting of Initial-scale, our visual viewport and layout viewport is equal, so we use in the calculation of the Document.body.client Width, with Window.innerwidth (visual viewport) The result is the same, just to show you. Finally, based on the base value of the HTML we have computed, we can restore the true width and height of the visual in CSS coding.

For example, we get a iphone6 of high-definition design (750x1334), in the PSD to measure a div width of 750, how to convert to REM units?

Formula--rem = PX/Base value

The font-size of the root HTML by flexible.js is 75px, so we can write CSS like this

div {

Width:10rem;

}

That's how it's translated into HTML.

// 750px

Finally because DPR for 2,scale 0.5, so the real width of the phone screen is 375px, just good. Imagine, if we do not initial-scale=0.5, so we have to finish in this design of the Div, then mental arithmetic divided by 2, will write width=375px, think on the tired.

Finally, say the font settings, this is more special. The following are the different devices in our current project (today's top ten) of the font display, you can clearly see any phone screen on the font size should be unified.

Of course, for convenience, we used sass to do a traversal. Traverse Font-size in different DATA-DPR (here we see DATA-DPR in the previous HTML)

Mobile-side layout best Practices (VIEWPORT+REM)