移动端Web页面适配方案

更新：完整js代码和sass mixin已上传于gitHub，点击此处可获取

===================================================

移动端Web页面，即常说的H5页面、手机页面、webview页面等。

手机设备屏幕尺寸不一，作移动端的Web页面，须要考虑在安卓/IOS的各类尺寸设备上的兼容，这里总结的是针对移动端设备的页面，设计与前端实现怎样作能更好地适配不一样屏幕宽度的移动设备。

适配的目标

引用一文章的描述：

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

概念理解

在作适配以前，须要先理解一些概念。对于不理解的地方，能够搜索更多文章看看，本文总结的也是摘抄了其余文章的描述，本文末有附相关连接。

viewport视口

viewport是严格的等于浏览器的窗口。viewport与跟viewport有关的meta标签的关系，详细建议读一读这篇文章：移动前端开发之viewport的深刻理解，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">

物理像素(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（device independent pixels，设备独立像素）与屏幕密度有关。dip能够用来辅助区分视网膜设备仍是非视网膜设备。
dp(device pixels, 设备像素)。

谢谢@游鱼与鱼指出：dp与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

CSS像素与设备像素“田字图解”
屏幕尺寸示意图

前端实现相关方式

下面大体列下前端在实现适配上常采用的方式。百分比、em单位的使用就没必要说了。

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="2"] & {
      font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
      font-size: $font-size * 3;
  }
}
@mixin px-dpr($property, $px) {
  #{$property}: $px;

  [data-dpr="2"] & {
    #{$property}: $px * 2;
  }

  [data-dpr="3"] & {
    #{$property}: $px * 3;
  }
}

// 使用
@include font-dpr(14px);
@include px-dpr(width, 40px); @include px-dpr(height, 40px);

设置缩放视口与设置理想视口有什么不一样

问题：viewport设为理想视口(scale=1)，基本已经知足适配，为何要动态设置viewport缩放?
缘由：iPhone6为例，dpr为2，缩放设为0.5，则DOM宽度为750，缩放后显示恰好为屏幕宽度375，而总的CSS像素实际上是750，与设备像素一致，这样1px的CSS像素，占用的物理像素也是1；而viewport设置缩放为1的理想视口状况下，DOM宽度为375，显示也恰好是屏幕宽度，然而1px的CSS像素，占用的物理像素是2。这样说来，这样设置能够实现1px的线条在二倍屏的显示。由于： CSS像素与设备像素的关系依赖于屏幕缩放。
验证：设备：iPhone6,
在scale=0.5时，1px边框显示效果;
在scale=1.0时，1px边框显示效果;
在scale=0.5时，2px边框显示效果;
经过对比后发现，在scale=0.5时，1px的线比scale=1.0要细，这也就解决了1px线条的显示问题。

rem(一个CSS单位)

定义：font size of the root element.

这个单位的定义和em相似，不一样的是em是相对于父元素，而rem是相对于根元素。rem定义是根元素的font-size, 以rem为单位，其数值与px的关系，需相对于根元素<html>的font-size计算，好比，设置根元素font-size=16px, 则表示1rem=16px。关于rem更多的解读，建议能够阅读本文末附的腾讯一团队的文章《web app变革之rem》。

根据这个特色，能够根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不一样终端上以相对一致的视觉效果呈现。

选取一个设备宽度做为基准，设置其根元素大小，其余设备根据此比例计算其根元素大小。好比使得iPhone6根元素font-size=16px。

设 备	设备宽度	根元素font-size/px	宽度/rem
iPhone5	320	js计算所得	--
iPhone6	375	16	23.4375
i6 Plus	414	js计算所得	--
-	360	js计算所得	--

根元素fontSize公式： width/fontSize = baseWidth/baseFontSize

其中，baseWidth, baseFontSize是选为基准的设备宽度及其根元素大小，width, fontSize为所求设备的宽度及其根元素大小

动态设置根元素fontSize

/**
  * 如下这段代码是用于根据移动端设备的屏幕分辨率计算出合适的根元素的大小
  * 当设备宽度为375(iPhone6)时，根元素font-size=16px; 依次增大；
  * 限制当为设备宽度大于768(iPad)以后，font-size再也不继续增大
  * scale 为meta viewport中的缩放大小
  */
(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  /**
    * ================================================
    *   设置根元素font-size
    * 当设备宽度为375(iPhone6)时，根元素font-size=16px; 
    × ================================================
    */
  var refreshRem = function () {
    var clientWidth = win.innerWidth
                      || doc.documentElement.clientWidth
                      || doc.body.clientWidth;

    console.log(clientWidth)
    if (!clientWidth) return;
    var fz;
    var width = clientWidth;
    fz = 16 * width / 375;
    docEl.style.fontSize = fz + 'px';
  };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, refreshRem, false);
  doc.addEventListener('DOMContentLoaded', refreshRem, false);
  refreshRem();

})(document, window);

rem计算(px2rem)

对于须要使用rem来适配不一样·屏幕的元素，使用rem来做为CSS单位，为了方便，能够借助sass写一个函数计算px转化为rem, 写样式时没必要一直手动计算。sass函数的使用若不熟悉可看下这篇文章：如何编写自定义Sass 函数, 也可使用sass的mixin来写，我的以为用函数写更适合。

/* 
 * 此处 $base-font-size 具体数值根据设计图尺寸而定
 * flexible中设置的标准是【fontSize=16px, when 屏幕宽度=375】，所以，按此标准进行计算，
 * 若设计图为iPhone6(375*667)的二倍稿，则$base-font-size=32px
 *
 */ 
@function px2rem($px, $base-font-size: 32px) {
  @if (unitless($px)) {
    @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
    @return px2rem($px + 0px); // That may fail.
  } @else if (unit($px) == rem) {
    @return $px;
  }
  @return ($px / $base-font-size) * 1rem;
}

// 使用，eg:
font-size: px2rem(18px);

问题思考

我以前一直在想一个问题，选取哪一个设备来作基准、屏幕宽度等分为多少比较合适，设计图给多大宽度的版本？被选取做为基准的设备，应当就是前端须要设计提供的设计图版本，这样能够避免一些尺寸上的纠缠，而等分为多少等分，除了考虑方便设计，是否须要考虑其余问题？对于根元素font-size没有手动设置的状况，1rem究竟等于多少？

了解到的一些事实：

• 某些Android设备会丢掉 rem 小数部分（具体是哪些设备，搜到的文章中没有说），那么1rem对应的px少些，在这些安卓设备上显示偏差就会较小，固然若是不存在会丢掉小数这个问题，这一说也就没必要考虑了。
• 未设置font-size状况下，1rem的大小具体看浏览器的实现，默认的根元素大小是font-size=16px
• 目前通常会选取iPhone6做为基准，设计图便要iPhone6的二倍图
• 当动态缩放视口为1/dpr, 计算所得的根元素fontSize也会跟着缩放，即若理想视口(scale=1), iPhone6根元素fontSize=16px; 若scale=0.5, iPhone6根元素fontSize=32px; 所以设置视口缩放应放于设置根元素fontSize以前。

flex布局

flex布局对于屏幕适配也颇有帮助，有些地方经过flex布局的实现方式，效果会比较合理。
关于flex布局，暂时不了解的建议阅读阮一峰老师的教程，分语法和实践两篇，讲得很清晰易懂实用。
Flex布局教程：语法篇

vm/vh:CSS单位

vw(view-width), vh(view-height) 这两个单位是CSS新增的单位，表示视区宽度/高度，视区总宽度为100vw, 总高度为100vh。

视区指浏览器内部的可视区域大小： window.innerWidth/Height

一些问题

upsampling/downsampling

DownSampling: 大图放入比图片尺寸小的容器中时，出现像素分割成就近色

不一样scale显示同一图片基本无问题;
同一sacle，不一样倍数图，存在色差(Downsampling)

关于这个我还不是很了解，暂时记一下。

手淘的实现方案

下面主要根据个人理解摘录了手淘公开的实现方案，详细能够去gitHub搜索查看，文末也附了连接。
图解设计与前端协做方案：图：手机淘宝团队适配协做模式
[淘宝手淘团队h5页面终端适配开源库：lib-flexible]()

方案关键点：

• 动态改写<meta name="viewport">标签
• 给<html>元素添加data-dpr属性，而且动态改写data-dpr的值
• 给<html>元素添加font-size属性，而且动态改写font-size的值

经过一段JS代码根据设备的屏幕宽度、dpr设置根元素的data-dpr和font-size, 这段JS代码要在全部资源加载以前执行，建议作内联处理。

各类元素(文本、图片)处理方案参考：
图：怎样让你的网站适应视网膜分辨率

px转rem的mixin

// 使用sass的混合宏
// 淘宝手淘的方案里，i6(375pt)屏幕宽度为10rem，即font-size=75px, scale=0.5 因设计图为二倍图，$base-font-size=75px
@mixin px2rem($property,$px-values,$baseline-px:16px,$support-for-ie:false){
    //Conver the baseline into rems
    $baseline-rem: $baseline-px / 1rem * 1;
    //Print the first line in pixel values
    @if $support-for-ie {
        #{$property}: $px-values;
    }
    //if there is only one (numeric) value, return the property/value line for it.
    @if type-of($px-values) == "number"{
        #{$property}: $px-values / $baseline-rem;
    }
    @else {
        //Create an empty list that we can dump values into
        $rem-values:();
        @each $value in $px-values{
            // If the value is zero or not a number, return it
            @if $value == 0 or type-of($value) != "number"{
                $rem-values: append($rem-values, $value / $baseline-rem);
            }
        }
        // Return the property and its list of converted values
        #{$property}: $rem-values;
    }
}

小结

• 适配不一样屏幕宽度以及不一样dpr，经过动态设置viewport(scale=1/dpr) + 根元素fontSize + rem, 辅助使用vw/vh等来达到适合的显示；
• 若无需适配可显示1px线条，也能够不动态设置scale，只使用动态设置根元素fontSize + rem + 理想视口；
• 当视口缩放，计算所得的根元素fontSize也会跟着缩放，即若理想视口(scale=1), iPhone6根元素fontSize=16px; 若scale=0.5, iPhone6根元素fontSize=32px; 所以没必要担忧rem的计算；
• !!css单位：之前我认为这样比较好：适配元素rem为单位，正文字体及边距宜用px为单位；如今认为所有用rem便可，包括字体大小，不用px；
• px为单位的元素，需根据dpr有不一样的大小，如大小12px, dpr=2则采用24px, 使用sass mixin简化写法；
• 配合scss函数，简化px2rem转换，且易于维护(若需修改$base-font-size, 无需手动从新计算全部rem单位)；
• px2rem函数的$base-font-size只跟根元素fontSize的基准（此文中是【fontSize=16px when 375】）以及设计图的大小有关，按此基准，若设计图为iPhone6二倍稿，则$base-font-size=32px，参数传值直接为设计图标注尺寸；
• 使用iPhone6(375pt)二倍设计图:宽度750px；
• 切图使用三倍精度图，以适应三倍屏（这个目前我尚未实际应用过）

相关连接：

• 使用Flexible实现手淘H5页面的终端适配
• web app变革之rem
• 手机淘宝的flexible设计与实现
• MobileWeb适配总结
• 移动端适配方案（下）
• 一些设备的屏幕参数
• viewports剖析
• 移动前端开发之viewport的深刻理解
• 在移动浏览器中使用viewport元标签控制布局
• 视区相关单位vw,vh简介以及可实际应用场景