移動端適配js

移動端適配方案很是多，入行兩年來始終沒有一直使用一個標準，每一個項目都按照業務需求來作適配

方案一：

最初聽李彥輝老師的課程使用rem 佈局了一段時間，可是字體計算比較麻煩，也不太精確

方案二：

偶然在Q羣裏一羣友分享的 動態改變根節點字體的方案佈局，頭部引用一個js。按照設計圖的像素寫rem，100px = 1rem 

//控制字體
var calculate_size = function() {
    var BASE_FONT_SIZE = 100;
    var docEl = document.documentElement,
        clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 640) + 'px';        //此處可根據設計圖能夠改變數值
};
// 若是瀏覽器不支持addEventListener，則停止
if (document.addEventListener) {
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    window.addEventListener(resizeEvt, calculate_size, false);
    document.addEventListener('DOMContentLoaded', calculate_size, false);
    calculate_size();
}

 

方案三：

按照iphone6 750 的設計稿尺寸 用px 單位 縮小2倍的寬度佈局，高度固定。750px = 375px。這是17年作移動端 經常使用的方式

 

方案四：

大神給的一個js 適配方案，動態建立meta 標籤，動態改變 viewport 。單位是兩倍 1px = 2px 。這種方案還在試用中

//添加viewport-mate標籤縮放網頁。
!function(userAgent) {
    if(userAgent.match(/AppleWebKit.*Mobile.*/)) {
        var screen_w = parseInt(window.screen.width),
            scale = screen_w / 750;
        if(/Android (\d+\.\d+)/.test(userAgent)) {
            var version = parseFloat(RegExp.$1);
            if(userAgent.indexOf("MX") > -1 && version >= 5) {
                //alert(userAgent)
                document.write('<meta name="viewport" content="width=750,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi">');
            } else {
                document.write(version > 2.3 ? '<meta name="viewport" content="width=750, minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi">' : '<meta name="viewport" content="width=750, target-densitydpi=device-dpi">');
            };
        } else {
            document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');
        }
    }
}(navigator.userAgent);