前端移动端适配方法

前端移动端适配方法

移动端的适配，是我接触移动端时遇到的第一个大难题， 现在回顾主要的解决方法有一下几种：

1.第一种是通过javascript修改标签的内容，通过控制不同移动端的缩放比例， 来达成适配
2.第二种是通过javascript来改变不同移动端元素的font－size 属性， 来达成适配

（默认设计稿为 750px）
1.第一种的代码如下：

if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
            var version = parseFloat(RegExp.$1)
            if (version > 2.3) {
                var phoneScale = parseInt(window.screen.width) / 750
                document.write('name="viewport" content="width=750,minimum-scale=' + phoneScale + ',maximum-scale=' + phoneScale + ',target-densitydpi=device-dpi">')
            } else {
                document.write('name="viewport" content="width=750,target-densitydpi=device-dpi">')
            }
        } else {
           document.write('name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')
        }

通过正则表达式，检测用户终端， 是否为安卓， 如果是安卓的话， 版本为多少， 然后根据不同的版本情况，改写标签的内容， 这种方法， 现在不常用了， 因为里面的一些属性， 已经废弃，比如target-densitydpi。

2.第二种方法，是比较常用的， 应该也算现在主流的适配方案

!function(b, a){
    var c = b.documentElement;
    a = function() {
        var a = c.clientWidth;
        a && (c.style.fontSize = a/375 * 100 + "px")
    };
    window.addEventListener("orientationchange" in window ? "orientationchange" : "resize", a, !1);
    b.addEventListener("DOMContentLoaded", a, !1)
}(document, window);

这种方法通过检测， orientationchange， 和 DOMContentLoaded 事件， 来动态的改变页面根元素的font-size大小， 来达到适配。