H5 terminal adaptation

This paper discusses two main terminal adaptation schemes used by Alibaba Mobile from 2015 to now. First, flexible scheme is the earliest one, which realizes responsive adaptation through javascript scheme. Later, viewport unit is compatible with many browsers. Flexible is the transition option that can be abandoned. Let’s talk about the implementation ideas of these two solutions. In mobile terminal layout, we need to face two most important problems: 1. The adaptation of each terminal. 2. Details of the retina screen.

Flexible solution: github.com/amfe/lib-fl… When using flexible solution, we will introduce a JS script in the web page. The main ideas of the script are as follows: 1. Modify the viewPort to implement 1px lines based on DPR values. 2. Divide the screen width into 10 sections and use each as the FONT size of the HTML, thus using REM to achieve proportional scaling.

Here’s how flexible works at the code level:

var docEI = window.document.documentElement
function refreshRem(){
  var width = docEI.getBoundingClientRect().width
  var rem = width/10
  docEI.style.fontSize = rem + 'px'
}
Copy the code

Among them, after obtaining the logical pixel width of the mobile phone screen through the getBoundingClientRect API, it is divided into 10 parts, and the width of each part is assigned to the fontSize of the document root element, so that the webpage layout can be carried out according to the proportion through REM.

var dpr = 0
var isAndroid = window.navigator.appVersion.match(/android/gi)
var isIPhone = window.navigator.appVersion.match(/iphone/gi)
var devicePixelRatio = window.devicePixelRatio
if(isIPhone){
    if(devicePixelRatio >= 3 && (! dpr || dpr >= 3)){ dpr = 3 }else if(devicePixelRatio >= 2 && (! dpr || dpr >= 2)){ dpr = 2 }else{
        dpr = 1
    }
}else{
    dpr = 1
}
scale = 1/dpr

var metaEI = window.document.querySelector('meta[name="viewport"]')
metaEI.setAttribute('content'.'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no')
Copy the code

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = This makes it possible to display a physical pixel line at 0.5px on the retina screen, making it look more delicate.

Vw scheme: Flexible scheme after all, rem unit is assigned by JS script. With viewport unit becoming compatible with many browsers, VW method of realizing layout directly through CSS is more and more widely used. The following is a brief introduction to the principle of VW: Vw is short for viewport’s Width. 1vw is equal to 1% of window.innerWidth and can be used directly in style files. But how does vw approach the 1px physical pixel problem in client-side compatibility? We can use postcss – write – SVG this plug-in through the border – image and background image, refer to “talk about Retina under 1 px solution” (www.jintiankansha.me/t/v2fRaSWoI…

Also share a dry goods full of public account: