移动端H5界面适配解决方案

(function(global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && define.amd ? define(factory) :
        (global.rem = factory());

}(this, (function() {

    //'use strict';

    //@todo  设计图尺寸不同机型等比例缩放模式，基础html尺寸不同机型适配模式

    var rem = {
        designWidth: 750, //设计稿宽px值
        px2rem: 100, //px to rem为100倍比例转换，宽度建议用百分比
        defaultFontSize: 20, //默认1rem字体大小
        maxWidth: 0, //rem适配最大尺寸(屏幕再大也就那个尺寸了)
        dpr: parseInt(window.devicePixelRatio || 1),
    };

    try {
        if (rem.android) {
            //android设置dpr不生效
            rem.dpr = 1;
        }

        // 设置默认最大尺寸
        var clientWidth = window.screen.width;
        if(clientWidth >= 480){
            rem.maxWidth = 360;
        }
    } catch (e) {}

    //根据devicePixelRatio自定计算scale
    //可以有效解决移动端1px这个世纪难题。
    var remEl = document.querySelector('meta[name="rem"]');

    //允许通过自定义name为rem的meta头，通过initial-dpr来强制定义页面缩放
    if (remEl) {
        var remCon = remEl.getAttribute('content');
        if (remCon) {
            var initialDprMatch = remCon.match(/initial\-dpr=([\d\.]+)/);
            if (initialDprMatch) {
                rem.dpr = parseFloat(initialDprMatch[1]);
            }
            var designWidthMatch = remCon.match(/design\-width=([\d\.]+)/);
            if (designWidthMatch) {
                rem.designWidth = parseFloat(designWidthMatch[1]);
            }

            var maxWidthMatch = remCon.match(/max\-width=([\d\.]+)/);
            if (maxWidthMatch) {
                rem.maxWidth = parseFloat(maxWidthMatch[1]);
            }
        }
    }

    document.documentElement.setAttribute('data-dpr', rem.dpr);
    document.documentElement.setAttribute('max-width', rem.maxWidth);


    var viewportEl = document.querySelector('meta[name="viewport"]');
    var scale = 1 / rem.dpr;
    var content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no';

    if (viewportEl) {
        viewportEl.setAttribute('content', content);
    } else {
        viewportEl = document.createElement('meta');
        viewportEl.setAttribute('name', 'viewport');
        viewportEl.setAttribute('content', content);
        document.head.appendChild(viewportEl);
    }

    var d = document.createElement('div');
    d.style.width = '1rem';
    d.style.display = 'none';
    document.head.appendChild(d);
    try {
        rem.defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
    } catch (e) {}

    rem.get_px = function(px_num) {
        var px = parseInt(px_num);
        if (!px) {
            return false;
        }
        return rem.dpr * px + 'px';
    }

    rem.resize = function() {
        //对，这个就是核心方法了，给HTML设置font-size。
        var measureWidth = 0;
        try {
            measureWidth = document.documentElement.getBoundingClientRect().width;
        } catch (e) {}

        if (!measureWidth) {
            measureWidth = window.innerWidth;
        }

        if (!measureWidth) { return false; }

        //设置最大尺寸
        if (rem.maxWidth) {
            var tp = rem.maxWidth * rem.dpr;
            if (measureWidth > tp) {
                measureWidth = tp;
            }
        }

        var fontSize = measureWidth / (rem.designWidth / rem.px2rem) / rem.defaultFontSize * 100;
        var elName = 'rem';
        var remStyle = document.getElementById(elName);
        if (remStyle) {
            remStyle.innerHTML = "html{font-size:" + fontSize + "% !important;}";

        } else {
            remStyle = document.createElement('style');
            remStyle.setAttribute('id', elName);
            remStyle.innerHTML = "html{font-size:" + fontSize + "% !important;}";
            document.head.appendChild(remStyle);

        }

        rem.callback && rem.callback();

    };

    rem.resize();
    //直接调用一次

    window.addEventListener('resize', function() {
        clearTimeout(rem.tid);
        rem.tid = setTimeout(rem.resize, 33);
    }, false);
    //绑定resize的时候调用

    window.addEventListener('load', rem.resize, false);
    //防止不明原因的bug。load之后再调用一次。

    setTimeout(function() {
        rem.resize();
        //防止某些机型怪异现象，异步再调用一次
    }, 333);

    return rem;
})));