解决因为手机设置系统字体大小导致h5页面在webview中变形的BUG

说实话，遇到这个问题，我内心里是崩溃的，表面还一副镇定自若的模样，事实上受到了一万点打击，我做的页面完美适配，就那一台手机，就那一台，整体都是乱的。
然后发现那台手机所有的字体都特别大，像是老年机，这时尝试去查看系统字体大小，发现设置比标准大了两个度【超小–标准–大--超大–巨大，就是五个程度，具体什么字不想看了，要吐了】，将系统字体大小设置回标准，完美解决。这时就要开始解决，当系统字体发生变化，h5页面受到影响这个bug了。

注：此移动端适配方案，我是基于vant的flexible源码基础上改的。

一、原因：

H5页面采用了rem单位，并且是通过JS来动态计算网页的视窗宽度，动态设置html的font-size。
h5页面被嵌入在APP的webview中
手机重设了系统字体大小

二、解决

方案一：【h5解决】
需要在设置完字体大小之后，再去重新获取一下html的font-size，这样就可以实现当实际的值与我们设置的值不一样时，根据比例再设置一次。

以下我适配方案的完整代码

【我的设计稿尺寸是750px的宽。所以代码中有几个地方的计算是为了写项目时方便，根据设计稿大小设置的】
注：
以下代码肯定是能够解决问题的。但是需要根据你的项目自己去调整算法。


(function(win, lib) {
    var doc = win.document;
    var docEl = doc.documentElement;//html根节点
    var metaEl = doc.querySelector('meta[name="viewport"]');
    var flexibleEl = doc.querySelector('meta[name="flexible"]');
    var dpr = 0;
    var scale = 0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});

    if (metaEl) {
        console.warn('将根据已有的meta标签来设置缩放比例');
        var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
        if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
        }
    } else if (flexibleEl) {
        var content = flexibleEl.getAttribute('content');
        if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
                dpr = parseFloat(initialDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
            if (maximumDpr) {
                dpr = parseFloat(maximumDpr[1]);
                scale = parseFloat((1 / dpr).toFixed(2));
            }
        }
    }

    if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
        }
        scale = 1 / dpr;
    }

    docEl.setAttribute('data-dpr', dpr);
    if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        var rem = width / 7.5;
        //  这个地方设置7.5，使在我的项目中 1rem = 100px；也就是说，我接到的设计稿中某div的宽是100px，我用rem的单位设置为1rem即可。
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;

//     为了解决本文bug，后加的几行代码-----开始
        var h = Math.max(docEl.clientHeight, window.innerHeight || 0);
        var w = Math.max(docEl.clientWidth, window.innerWidth || 0);
        var width1 = w > h ? h : w;
        width1 = width1 > 1500 ? 1500 : width1
        // 这个1500 也是我设计稿750的2倍
        var fz = ~~(width1*100000/75)/10000
        //这个75也是根据我设计稿的大小设置的
        doc.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz +"px";
        var realfz = ~~(+window.getComputedStyle(doc.getElementsByTagName("html")[0]).fontSize.replace('px','')*10000)/10000
        if (fz !== realfz) {
            doc.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) +"px";
            // docEl.style.fontSize = fz * (fz / realfz) + 'px';  //跟上面那句代码一个意思，都行
        }
//     为了解决本文bug，后加的几行代码-----结束

    }

    win.addEventListener('resize', function() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener('pageshow', function(e) {
        if (e.persisted) {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = 12 * dpr + 'px';
    } else {
        doc.addEventListener('DOMContentLoaded', function(e) {
            doc.body.style.fontSize = 12 * dpr + 'px';
        }, false);
    }


    refreshRem();

    flexible.dpr = win.dpr = dpr;
    flexible.refreshRem = refreshRem;
    flexible.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    }
    flexible.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }

})(window, window['lib'] || (window['lib'] = {}));

方案二：【安卓android端解决】

安卓客户端通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放，按照百分百显示。

but，这个方法我没有测试过，只是在浏览网页的时候，有碰到这个方法，可以先试一下

OK…

贴个征婚启事~~~

受朋友之托。
女，程序员，22岁，未婚，身高167cm，体重48KG，山东青岛。
目前在阿里巴巴工作，负责支付宝相关业务，工号 653899296 支付宝搜索工号可见照片。
漂亮大方，爱好读书、健身、游泳、吃鸡。
青岛有房一套，有车。
父母退休，家庭不拜金、人务实，一直没有合适的男朋友。
她本人要求不高，只要对她真心好就行。

手机改变系统字体大小导致h5页面在webview中变形。。h5页面嵌入webview中，在有些手机上布局乱套的bug。。

解决因为手机设置系统字体大小导致h5页面在webview中变形的BUG

一、原因：

二、解决

以下我适配方案的完整代码

猜你喜欢