移动端适配js

Posted 2020-10-19 ankle

移动端适配方案非常多，入行两年来始终没有一直使用一个标准，每个项目都按照业务需求来做适配

方案一：

最初听李彦辉老师的课程使用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);