移动端适配

移动端适配

参考文章：

• https://segmentfault.com/a/1190000008767416
• https://www.jianshu.com/p/2c33921d5a68

适配的目标

在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”。

viewport视口

viewport是严格的等于浏览器的窗口。

• visual viewport可见视口 屏幕宽度

• layout viewport布局视口 DOM宽度

• ideal viewport理想适口：使布局视口就是可见视口

• 设备宽度(visual viewport)与DOM宽度(layout viewport), scale的关系为：
  （visual viewport）= （layout viewport）* scale

• 获取屏幕宽度(visual viewport)的尺寸：window. innerWidth/Height。

• 获取DOM宽度(layout viewport)的尺寸：document. documentElement. clientWidth/Height。

设置理想视口： 把默认的layout viewport的宽度设为移动设备的屏幕宽度，得到理想视口(ideal viewport):

<meta name="viewport" content="width=device-width,initial-scale=1">

属性	属性值	描述
width	数值 / device-width	视口宽度
height	数值 / device-height	视口高度
initial-scale	0.0 ~ 10.0	设备宽度与视口大小之间的缩放比率
maximum-scale	0.0 ~ 10.0	缩放最大值
minimum-scale	0.0 ~ 10.0	缩放最小值
user-scalable	布尔值	默认yes，为no时用户不能缩放网页

物理像素(physical pixel)

物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。

CSS像素

CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。CSS像素就是写CSS时所用的像素。

设备像素比dpr(device pixel ratio)

设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：

设备像素比 ＝ 物理像素 / 设备独立像素

在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。

• viewport中的scale和dpr是倒数关系。
• 获取当前设备的dpr：
  JavaScript: window.devicePixelRatio。
  CSS: -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio。
• 不同dpr的设备，可根据此做一些样式适配(这里只针对webkit内核的浏览器和webview)。

设备独立像素dip或dp

dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

• 安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级。规定以160dpi为基准，1dp=1px。如果密度是320dpi，则1dp=2px，以此类推。
• IOS设备：从IPhone4开始为Retina屏
• CSS像素与设备独立像素之间的关系依赖于当前的缩放等级。

屏幕像素密度PPI(pixel per inch)

屏幕像素密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

屏幕密度 = 对角线分辨率/屏幕尺寸

概念关系图

屏幕尺寸、屏幕分辨率-->对角线分辨率/屏幕尺寸-->屏幕像素密度PPI
                                             |
              设备像素比dpr = 物理像素 / 设备独立像素dip(dp)
                                             |
                                       viewport: scale
                                             |
                                          CSS像素px

前端实现相关方式

下面大致列下前端在实现适配上常采用的方式。

viewport

设置理想视口

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

设置理想视口(页面不缩放，禁止用户缩放)，使得DOM宽度(layout viewport)与屏幕宽度(visual viewport)一样大,DOM文档主宽度即为屏幕宽度。1个CSS像素(1px)由多少设备像素显示由具体设备而不同。

动态设置视口缩放为1/dpr

对于安卓，所有设备缩放设为1,对于IOS，根据dpr不同，设置其缩放为dpr倒数。设置页面缩放可以使得1个CSS像素(1px)由1个设备像素来显示，从而提高显示精度；因此，设置1/dpr的缩放视口，可以画出1px的边框。

不管页面中有没有设置viewport，若无，则设置，若有，则改写，设置其scale为1/dpr。

(function (doc, win) {
   
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var dpr = 0;
  var scale = 0;

  // 对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1
  if (!dpr && !scale) {
   
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/[iphone|ipad]/gi);
    var devicePixelRatio = win.devicePixelRatio;

    if(isIPhone) {
   
      dpr = devicePixelRatio;
    } else {
   
      drp = 1;
    }
    
    scale = 1 / dpr;
  }
   //   设置data-dpr和viewport
  docEl.setAttribute('data-dpr', dpr);
  // 动态改写meta:viewport标签
  if (!metaEl) {
   
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    document.documentElement.firstElementChild.appendChild(metaEl);
  } else {
   
    metaEl.setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  }
})(document, window);

px单位的适配

设置动态缩放视口后，在iPhone6上，缩放为0.5，即CSS像素2px最终显示效果为1px，而在scale=1的设备，CSS像素1px显示效果为1px，那么，为了达到显示效果一致，以px为单位的元素(比如字体大小)，其样式应有适配不同dpr的版本，因此，在动态设置viewport: scale的时候，同时在html根元素上加上data-dpr=[dpr]，但是这种方式还是不够，如果dpr为2，3之外的其他数值，px就没办法适配到。因此我会选择都用rem为单位进行适配。
样式示例：

.p {
   
    font-size: 14px;

  [data-dpr="2"] & {
   
    font-size: 14px * 2;
  }

  [data-dpr="3"] & {
   
    font-size: 14px * 3;
  }
}

为写样式方便，可以借助sass的mixin写代码片段：

// 适配dpr的字体大小
@mixin font-dpr($font-size){
   
  font-size: $font-size;

  [data-dpr