通用移动端H5适配方案

2019独角兽企业重金招聘Python工程师标准>>>

      个人在做手机端适配的时候早期是很痛苦的,后来学习了淘宝等网站主流的适配方案后才发现原来移动端适配是这么的方便简单,不过这需要一些准备工作以及知识积累,下边来了列举下不同的适配方案:
     

早期使用的方案:

        1.流式布局(百分比布局) + 媒体查询

        2.响应式布局: BootStrap 等等

        3.自适应布局:Flex布局

 

现在推荐的方案:

        这里需要我们先了解一些常规概念:               

1. 设备像素（device pixel, dp）：

设备像素又称物理像素(physical pixel)，一个物理像素是显示器(手机屏幕)上最小的物理显示单元，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，单位 pt。在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

2. CSS像素：

CSS像素也被称为逻辑像素，是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。

3. 设备独立像素（density-independent pixel，dip）：

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素，只是在android机中CSS像素就不叫“CSS像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

4. 设备像素比（device pixel ratio，dpr）：

设备像素比 = 设备像素 / 设备独立像素     // 在某一方向上，x方向或者y方向，单位：dpi

在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。

在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

5. 物理像素和设备对像素的关系：

在一定的条件下两者它们两者是可以相等的，比如：在PC端浏览器默认情况下（100%，即页面没被缩放），一个物理像素 = 一个设备独立像素。而在移动端可就不一样的，为了让画质更精细，这两个值很多时候是不相等的。这里就该提到一个叫ppi的东西。

PPI 全称是（pixel per inch）翻译下就是每英寸内有多少个像素点，这个像素点指的是设备像素点（物理像素），说得接地气点PPI就是像素密度（pixel density）。PPI的值越高，画质越好，也就是越细腻，看起来更有逼格。

 

实现方案:

    1.设置meta标签:  

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

    2.JS部分:

(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部分

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

4.样式编写:

    如果设计稿给我们的宽度是750px,其中一个标题是60px,

    则我们这样设置这个标题:

 font-size: pxToRem(60px);

经过这些设置我们基本可以完成95%的移动端适配工作了,其他的细节不能满足的我们可以通过媒体查询以及js去控制

2018-9-25 补充:

通过pxToRem转换有些繁琐,我们可以通过直接设置html根节点的font-size大小,然后通过rem去适配既可.

 

转载于:https://my.oschina.net/jamesview/blog/1799853