移動端適配js

標籤：useragent   tor   regex   add   get   function   index   class   style   

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

方案一：

最初聽李彥輝老師的課程使用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);

 

移動端適配js