移动端（二）——移动端适配方案之viewport适配、比例缩放适配和百分比适配

适配：在不同尺寸的手机上，页面相对性的达到合理的展示（自适应）或这保持统一效果的等比缩放（看起来差不多），例如一个占满屏幕宽度的元素，在不同尺寸的手机下所显示都是占满宽度。

适配的元素

1. 字体
2. 宽高
3. 间距
4. 图像（图标，图片）

适配方案：

1、百分百比适配
这种适配方案是给元素设置百分比，例如4个div想想占满宽度100%，则可以给每一个div设置宽度为25%，这样不固定宽度，使得在不同的手机尺寸下都能达到适配。

缺点：
1. 百分比的值不好计算
2. 需要确定父级的大小，因为要根据父级的大小进行计算
3. 宽度可以设置，但是高度不好设置

一般情况下百分比布局是是需要配合其它的布局而用

2、比例缩放适配
把所有机型的设备独立像素设置成一致的（以前淘宝用的是这种方法），这样做就可以有统一的宽度（设备独立像素宽），过程如下：

（1） viewport需要通过js动态的设置（不能直接把device的值设置成数值）

（2）通过设置比例（初始比例以及缩放比例），把宽度缩放成一致的

注意：
viewport里给了缩放的值以后，最终的页面的宽度（也就是审查根元素html的时候的宽度）是拿原来的值除以缩放比例，而不是乘以缩放比例。例如，iPhone 6的宽度是375，但是设置scale = 2后，html的宽度变成了187。

<script>
    (function(){
        /*
         *iphone 6plus
         *原来的尺寸                            414
         *要变成的尺寸（以iPhone 6为基准）375    375
         *比例                                  414/375
         */
        var curWidth = window.screen.width; //iphone 6plus为414px
        var targetWidth = 375;
        var scale = curWidth/targetWidth;
        var meta = document.createElement("meta");
        meta.name = "viewport";
        meta.content = 'initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale+'';
        document.head.appendChild(meta);
    })()
script>

//通过这样动态设置，无论什么的手机尺寸，iphone5,iphone6等，其html的宽度都会变成375px即目标值宽度,targetWidth的值

如下图：iphone5，iphone6，iphone 6plus下：

缺点：
1. 就像在viewport设置宽度的时候，可以把宽度设置成一个固定值一样，会出现所有的手机看上去都是同样的大小，没有分别了，不太好，厂商特意做出各种大小的手机，还要弄成一样，那人家买大屏机有什么意义
2. 算出的的值在一些有小数的情况下可能会出现误差（无关紧要），因为设备独立像素不能有小数

3. viewport适配

根据dpr的值，把视口进行缩放，缩放到物理像素，也就是把屏幕的尺寸(设备的独立像素)直接设置成它对应的物理像素。
https://m.taobao.com 淘宝在用，不过他只处理了dpi为2的几个设置，以及iphone6 plus。

<script>
    (function(){
        /*
         * 320/scale=640
         * 375/scale=750
         * 414/scale=1242
         * 
         * scale=320/640        1/2
         * scale=375/750        1/2
         * scale=414/1242        1/3
         * 
         * scale的值=1/dpr
         */

        var scale=1/window.devicePixelRatio;
        var meta=document.createElement("meta");
        meta.name='viewport';
        meta.content='initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale+'';
        document.head.appendChild(meta);
    })();
script>

缺点：
1. 这种方法有时候不准确，比如dpr不为整数的时候，会出现除不尽的情况，那缩放的倍数就会出现很长的小数，再去算物理像素的时候就会有误差
2. 如果屏幕的分辨率是非标准的话，算出的物理像素就是非标准的（iphone6 plus是1080而非1242）

但是以上三种适配方案在现在并非主流适配方案，有较明显的缺点，现在主流的适配方案是rem适配和flex适配，这两种适配方案在下一篇讲到。