Universal Mobile H5 Adaptation Solution

      It was very painful in the early days for individuals to adapt to the mobile terminal. Later, after learning the mainstream adaptation solutions of Taobao and other websites, I found that the mobile terminal adaptation is so convenient and simple, but it requires some preparation work and knowledge accumulation. Below is a list of different adaptation options:
     

Schemes used in the early days:

        1. Flow layout (percentage layout) + media query

        2. Responsive layouts: BootStrap and more

        3. Adaptive Layout: Flex Layout

 

Currently recommended solutions:

        Here we need to understand some general concepts first:               

1. Device pixel (dp):

A device pixel is also called a physical pixel. A physical pixel is the smallest physical display unit on a display (mobile phone screen), which means one point on a display. From the day the screen is produced in the factory, the device pixels on it are fixed, the unit is pt. Under the scheduling of the operating system, each device pixel has its own color value and brightness value.

2. CSS Pixels:

CSS pixels, also known as logical pixels , are the concept of web programming and are used to measure pixels logically independent of the device. That is to say, the CSS pixel unit we use when making web pages is abstract, not practical. existing.

3. Device-independent pixel (density-independent pixel, dip):

A device-independent pixel (also called a density-independent pixel ) can be thought of as a point in the computer coordinate system, which represents a virtual pixel that can be used by a program (for example:  css像素, but in android, CSS pixels are not called "CSS pixels"). " instead called "device independent pixels"), and then converted to physical pixels by the relevant system. Therefore, there is a certain correspondence between physical pixels and device-independent pixels, which is what will be said next 设备像素比.

4. Device pixel ratio ( dpr ):

Device pixel ratio = device pixel / device independent pixel // in a certain direction, x direction or y direction, unit: dpi

In javascript, window.devicePixelRatiothe dpr of the current device can be obtained by.

In css, you can pass -webkit-device-pixel-ratioand perform media queries, -webkit-min-device-pixel-ratioand  -webkit-max-device-pixel-ratiomake some style adaptations for devices with different dprs (here only for browsers and webviews of the webkit core).

5. Physical pixel and device-to-pixel relationship:

Under certain conditions, the two can be equal, for example: in the default case of the PC browser (100%, that is, the page is not zoomed), one physical pixel = one device independent pixel. On the mobile side, it is different. In order to make the picture quality more refined, these two values ​​are often unequal. This should mention something called ppi.

The full name of PPI is (pixel per inch), which translates to how many pixels per inch . This pixel refers to the device pixel (physical pixel), and the grounded PPI is the pixel density. The higher the value of PPI, the better the picture quality, that is, the more delicate and more compelling it looks.

 

Implementation plan:

    1. Set the meta tag:  

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

    2.JS part:

(function (window, doc) {
        var docEl = document.documentElement
        var dpr = window.devicePixelRatio || 1
        var scale = 1 / dpr
        var metaEl = document.querySelector('meta[name="viewport"]')
        // var tid
        docEl.setAttribute('data-dpr', dpr)
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
        function refreshRem () {
          var rem = docEl.clientWidth / 10
          console.log('userAgent' + window.navigator.userAgent)
          if (window.navigator.userAgent.indexOf('Android') > -1) { // 如果不是安卓设备则输出IOS的样式逻辑
            docEl.style.fontSize = rem + 'px'
          } else if (window.navigator.userAgent.indexOf('iPhone') > -1) { //如果不是安卓和IOS的样则默认执行pc的样式逻辑
            docEl.style.fontSize = rem + 'px'
          } else {
            docEl.style.fontSize = (rem > 68.1 ? 68.1 : rem) + 'px'
            window.addEventListener('load', function () {
              document.body.style.maxWidth = '664px'
              document.body.style.position = 'absolute'
              document.body.style.left = '50%'
              document.body.style.marginLeft = '-332px'
              // document.getElementById('html').style.height = document.body.offsetHeight + 'px'
            })
          }
        }
        refreshRem()
        window.addEventListener('pageshow', function (e) {
          if (e.persisted) {
            refreshRem()
          }
        })
        window.addEventListener('resize', refreshRem)
      })(window, document)

3. CSS section

/*移动端适配计算 start*/
$baseUIPx : 750px;
@function pxToRem($px) {
  @return $px / ($baseUIPx / 10) * 1rem;
}

4. Style writing:

    If the design draft gives us a width of 750px and one of the headers is 60px,

    Then we set the title like this:

 font-size: pxToRem(60px);

After these settings, we can basically complete 95% of the mobile adaptation work. If other details cannot be satisfied, we can control it through media queries and js.