移动端自适应方案

一、基础原理

1.基准值

（1）选择一种尺寸作为设计和开发的基准。
（2）定义适配规则，自动适配其他屏幕下的尺寸。

2.终端设备

（1）视口

viewport 特性，用于定义视口的行为。为何会引入这种特性？移动终端的兴起使用户开始大规模在手持设备上浏览网页，但是，用户不能很好地通过手机等设备浏览网页，因为屏幕太小。如果用手机访问一些比较老的网站，会发现虽然页面能显示全，但是字却很小，需要手动缩放才可以看清。
<1> 布局视口 （layout viewport）
viewport meta 标签，用来创建一个虚拟的布局视口，这个虚拟的布局视口分辨率接近于 pc。Apple 公司将其定义为 980px ，其余厂商可能各有不同。这样，由于移动端和pc端的宽度基本一致，CSS 的表现也将和pc端基本一致，页面结构可以保持正常。
<2> 视觉视口（visual viewport）
视觉视口可以认为是设备物理屏幕的可视区域，开发者无法对其进行设置和修改。它的尺寸不是一个固定值，每种设备都有可能不同。举例如下：
iPhone6、iPhone6s：375*627px
iPhone6 Plus、iPhone6s Plus：414*736px
iPhone4、iPhone5s：320*480px
在 iPhone6 上，会在 375px 的视觉视口上创建一个 980px 宽度的布局视口，用户可以在视觉视口上拖动或者缩放网页，来获得比较好的浏览效果。当定义一个元素的宽度为 100% 时，其实际宽度是 980px 而不是 320px。
这时，从视觉上来看，整个网页是缩放显示的。因为，980px 宽度的网页显示在了320px宽度的视口上。
<3> 理想视口（ideal viewport）
类似于布局视口，宽度和视觉视口相同。在这个视口下，用户不用缩放和拖动网页就能进行网页浏览，理想视口就是通过设置 viewport 的设置来达到想要的效果。
<4> viewport 属性
width 用来定义布局视口的宽度，如果不指定该属性，则其为厂商设置的默认值。如果设置 width 为 device-width ，则布局视口的宽度与视觉视口的宽度一致，这时的布局视口就是理想视口（理想视口不是一个自然存在的视口，而是看其表现属性来决定是否成为理想视口）。
initial-scale 用于定义页面的初始缩放比例。如果定义初始缩放比例为1，则布局视口也会成为理想视口。
maximum-scale 约束用户能够放大的比例。
minimum-scale 指定页面的最小缩放比例。
user-scalable 指定用户是否可以通过手势缩放页面，默认值为 yes。

（2）DPR

简单来说，DPR 是指设备物理像素尺寸值与设备独立像素尺寸值（逻辑像素尺寸）的比值。在 CSS 中，所有表示尺寸的值都为设备独立像素尺寸，如果 DPR 为 1，则说明设备独立尺寸值和物理尺寸值正好一致，这时，一个物理像素点阵对应于1个单位的逻辑尺寸值。
大部分情况下，这两个值并不保持一致。以视网膜屏为例，iPhone6 中，设备物理像素宽度为750，设备独立像素尺寸宽度为 375，这时 DPR 为 2。在这种情况下，网页元素的展示情况如何？

（3）一像素问题

由上文可知，移动端适配问题，一个是由于设备本身的尺寸，另一个则是屏幕的物理分辨率。
在 CSS 中，设置一条线的宽度为 1px，在逻辑单位上来看，没什么问题。视觉上看起来，在普通屏幕和高清屏幕上，这条线的宽度也是一样的。不同之处在于，高清屏的像素点比普通屏密集，为了保证线的视觉宽度，就需要占用两倍的物理像素点。这种情况，在截屏后就可以发现。如何处理这种问题？

（4）高清图片显示问题

正如上述逻辑像素与物理像素的关系一样，实际上二者之间没有什么直接联系。要让图片显示清晰，只需要图片像素尺寸和物理像素尺寸一一对应就可以。
在高清屏下，如 DPR 为 2 的屏幕，一张尺寸为 100px * 100px 的图片，会占用 200 * 200 面积的物理像素点，也就是一个位图像素点对应4个物理像素点，由于单个位图像素点无法再分割，所以物理像素上会就近取色，从而使图片变得模糊。处理这种情况，一个是将图片尺寸扩展为2倍；一个是将现有的图片容器缩小2倍，这样都可以使得位图像素点和物理像素点一一对应。
如果在普通屏幕下使用了2倍尺寸的图片，肉眼看上去，图片不会模糊，但是会有轻微色差。这种情况下，相当于浪费了图片像素。
常用处理方式为，根据屏幕不同的 DPR 来加载不同的图片。

（5）字体大小

在高清屏下，文字看起来会比较小，而且笔画很细，既没有美感，也不太容易看清楚。因此，比较理想的方式就是通过 DPR 来设置字体的大小，下文将有示例。

二、适配方式

使用 rem 单位来规定元素尺寸，这里以 750 宽度的设计图来作为基准值。根据不同的平台来手动设置 PDR 值，这里的设置 DPR 值，实际是改变了布局视口，并不是真的改变设备的 DPR。

（1）iOS 平台

以 iPhone6 为例，其 DPR 为 2。则将其初始缩放值设为 DPR / 2，这时布局视口的宽度就是视觉视口的二倍，尽管显示的物理区域是一样的，也就是说，实际的布局宽度变成了 750 而不是 375 。这样，布局区域的尺寸就和设计图宽度一致了。

如何将px单位换算为 rem 单位？这取决于我们根元素的字体大小设置为多少。750 宽度的布局视口中，我们将屏幕宽度等分为10份，则每一份都为75，实际就是每一份都为 75px ，然后将根元素字体大小设置为 75px。这样，一个 rem 单位就对应于 75 个 px 单位。换算时，只需要将设计图中的尺寸除以这个比例值就可以（1rem和75px表示的尺寸一样，可看成一种换算进制）。

（2）Android平台

基本适配逻辑和iOS平台一致。

（3）关键代码

// 在没有显式设置缩放的情况下，遵循以下逻辑
 if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

//添加 meta 标签
if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

//设置根元素字体大小
function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        console.log(">>>>>>>", width);
        console.log("dpr", dpr);
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

//设置文本字体大小
if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }