移动端适配方案

作者: puxiaotaoc | 来源:发表于2018-11-13 11:49 被阅读45次

移动端适配方案：
1）viewport（scale=1/dpr）
2）rem
3）flex
4）vm/vh
一、什么是移动端适配
移动端Web页面，即常说的H5页面、手机页面、webview页面；
手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑安卓/IOS的各种尺寸设备上的兼容，针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备；
目的：在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”；

二、viewport视口

浏览器可见视口和布局视口

visual viewport：可见视口，即屏幕宽度；

layout viewport：布局视口，即DOM宽度；

idea viewport：理想适口，使布局视口就是可见视口；

设备宽度（visual viewport）与DOM宽度（layout viewport），scale的关系是：
（visual viewport）= （layout viewport）* scale

获取屏幕宽度（visual viewport）的尺寸：window. innerWidth/Height

获取DOM宽度（layout viewport）的尺寸：document. documentElement. clientWidth/Height

完美适配：首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理，ppk把这个viewport叫做 ideal viewport，也就是第三个viewport——移动设备的理想viewport；
移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？这就该轮到meta标签出场了；meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条；
这个name为viewport的meta标签到底有哪些东西呢，又都有什么作用呢？

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：
width：设置layout viewport 的宽度，为一个正整数，或字符串"width-device"；
initial-scale：设置页面的初始缩放值，为一个数字，可以带小数；
minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数；
maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数；
height：设置layout viewport 的高度，这个属性对我们并不重要，很少使用；
user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许；

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

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

参考：移动前端开发之viewport的深入理解

三、物理像素(physical pixel)

物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件，每个像素可以根据操作系统设置自己的颜色和亮度，所谓的一倍屏、二倍屏（Retina）、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素，关于这个概念，看一张“田”字示意图就会清晰了；

四、CSS像素

CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确度量WEB页面上的内容，一般情况下，CSS像素称为与设备无关的像素（device-independent pixel），简称DIPs，CSS像素顾名思义就是我们写CSS时所用的像素；

作为Web开发者，我们接触的更多的是用于控制元素样式的样式单位像素。这里的像素我们称之为CSS像素
参考：CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport #21
五、设备像素比

设备像素比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)
安卓设备根据屏幕像素密度可分为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像素与设备像素“田字图解”

九、前端实现相关方式

viewport 设置理想视口

// 设置理想视口，使得DOM宽度(layout viewport)与屏幕宽度(visual viewport)一样大，DOM文档主宽度即为屏幕宽度，1个CSS像素（1px）由多少设备像素显示由具体设备而不同；
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

十、动态设置视口缩放为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的时候，同时在根元素上加上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；
根据这个特点，可以根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不同终端上以相对一致的视觉效果呈现；
选取一个设备宽度作为基准，设置其根元素大小，其他设备根据此比例计算其根元素大小，比如使得iphone6根元素font-size=16px；

设备	设备大小	根元素font-size/px	宽度/rem
iPhone5/SE	320*568	js计算所得	--
iPhone6/7/8	375*667	16	23.4375
i6/7/8 Plus	414*736	js计算所得	--
iPhone x	375*812	js计算所得	--
iPad	768*1024	js计算所得	--
-	360	js计算所得	--

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

十四、动态设置根元素fontSize

// 以320px的屏幕为基准
const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

/**
  * 以下这段代码是用于根据移动端设备的屏幕分辨率计算出合适的根元素的大小
  * 当设备宽度为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，写样式时不必一直手动计算；

/* 
 * 此处 $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之前；

十七、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；
切图使用三倍精度图，以适应三倍屏（这个目前我还没有实际应用过）

二十二、Retina视网膜屏
Retina视网膜屏，是指人眼在正常观察距离（iPhone定义为10英寸，iPad定义为15英寸）下，视网膜已经无法分辨单个像素，不再出现像素颗粒感，仅能观察到如丝般细腻的画面，可以理解为超高分辨率屏幕；

这是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。

最先使用retina屏幕是iphone 4，屏幕分辨率为960 * 640（326ppi）。

对比如下两幅图，可以清晰地看出是否 Retina 屏的显示差异：

屏幕快照 2018-08-20 下午3.00.23.png

两代iPhone 的物理尺寸（屏幕宽高有多少英寸）是一样的，从上图可以看出，iphone 4的显示效果要明显好于iphone 3GS，虽然 iPhone 4 分辨率提高了，但它不同于普通的电脑显示器那样为了显示更多的内容，而是提升显示相同内容时的画面精细程度。这种提升方式是靠提升单位面积屏幕的像素数量，即像素密度来提升分辨率，这样做的主要目的是为了提高屏幕显示画面的精细程度。以第三代 MacBook Pro with Retina Display为例，工作时显卡渲染出的2880x1880个像素每四个一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的1440x900分辨率显示屏相同，但精细度是原来的4倍。

注意：在桌面显示器中，我们调整了显示分辨率，比如从 800 * 600 调整到 1024 * 768 时，屏幕的文字图标会变小，显示的内容更多了。但 Retina 显示方式不会产生这样的问题，或者说， Retina 显示技术解决的是显示画面精细程度的问题，而不是解决显示内容容量的问题。

二十三、相关链接

移动端适配方案

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端面试基础必备

web收录

CSS