2015-10-16更新。

简介

挪动屏幕适配是一个比较使人头疼的题目，这是我写的一个经由过程动态设置viewport的挪动屏幕适配的东西函数，包含定宽和rem两种适配要领，现在在我本身的项目顶用起来还不错，后续也会优化调解，github地点这里。

申明

页面事前增加meta标签 <meta name="viewport" content="width=device-width, initial-scale=1" />，然后挪用要领如fixViewport('fixed', 640)即可。

参数

• type
  适配范例(可选值为’fixed’或’rem’)

• width
  设想稿宽度(整数)

适配要领

能够挑选以下两种体式格局举行屏幕适配：

• 定宽：
  道理：设定viewport的宽度为固定值(即通报的width值)，并依据屏幕宽度和width值盘算viewport缩放比例。
  现实开发在css中任何长度尺寸均运用px单元，大小设置为设想稿中原始尺寸值；
  字体单元运用em, body下直接子元素字体大小设置为设想稿中尺寸值 / 100；
  非直接子元素若其父元素未设置字体大小则与直接子元素雷同，不然依据父元素字体大小盘算其相对值。

• rem:
  道理：依据装备dpr和屏幕宽度来盘算viewport宽度，并依据装备dpr盘算viewport缩放比例，然后在html标签中设置font-size的属性值。
  现实开发在css中任何长度尺寸均运用rem单元，大小设置为设想稿中尺寸值 / 100;
  字体单元运用em, body下直接子元素字体大小设置为设想稿中尺寸值 / 100；
  非直接子元素若其父元素未设置字体大小则与直接子元素雷同，不然依据父元素字体大小盘算其相对值。
  若须要1px物理像素的边框结果，则border的宽度不须要运用rem，设定为1px即可。

代码

/**
 * Created by GG on 15/7/29.
 *
 *  页面事前增加meta标签 <meta name="viewport" content="width=device-width, initial-scale=1" />
 *  参数：type(适配范例, 可选值为'fixed'或'rem')；width(设想稿宽度，整数)
 *  能够挑选以下两种状况适配：
 *  1. 定宽：道理是设定viewport的宽度为固定值(即通报的width值)，并依据屏幕宽度和width值盘算viewport缩放比例。
 *     现实开发在css中任何长度尺寸均运用px单元，大小设置为设想稿中原始尺寸值；
 *     字体单元运用em, body下直接子元素字体大小设置为设想稿中尺寸值 / 100；
 *     非直接子元素若其父元素未设置字体大小则与直接子元素雷同，不然依据父元素字体大小盘算其相对值。
 *  2. REM：道理是依据装备dpr和屏幕宽度来盘算viewport宽度，并依据装备dpr盘算viewport缩放比例，然后在html标签中设置font-size的属性值。
 *     现实开发在css中任何长度尺寸均运用rem单元，大小设置为设想稿中尺寸值 / 100;
 *     字体单元运用em, body下直接子元素字体大小设置为设想稿中尺寸值 / 100；
 *     非直接子元素若其父元素未设置字体大小则与直接子元素雷同，不然依据父元素字体大小盘算其相对值。
 *     若须要1px物理像素的边框结果，则border的宽度不须要运用rem，设定为1px即可。
 */

(function () {
    function fixViewport(type, designWidth) {
        var metaEl = document.querySelector('meta[name="viewport"]');
        //因为初始设置了viewport的width=device-width,所以此处docEl.clientWidth等于屏幕的装备宽度
        var clientWidth = document.documentElement.clientWidth;
        var width, scale;

        switch (type) {
            case 'fixed':
                width = designWidth;
                scale = clientWidth / designWidth;
                break;
            case 'rem':
                var dpr = window.devicePixelRatio || 1;
                width = clientWidth * dpr;
                scale = 1 / dpr;
                document.documentElement.style.fontSize = 100 * (clientWidth * dpr / designWidth) + "px";
                break;
        }
        metaEl.setAttribute('content', 'width=' + width + ',initial-scale=' + scale + ',maximum-scale=' + scale +
            ',minimum-scale=' + scale);

        //设置body的基准字体大小
        document.body.style.fontSize = 50 / scale + 'px';
    }

    fixViewport('rem', 640);
}());