Android 系统字体大小动态改变，导致webview中显示不兼容的问题解决

唠叨几句：

在移动端再开发的过程中，很容易使用到webview,它也是用来混合开发的中间桥梁，因此解决webview使用过程中出现的问题是非常有必要的；

问题现象与发现：

现象：

日前，在是使用webview加载html过程中出现了一个这样的问题：

页面显示变形；
url中有设置图片，图片展示不全呈截断式；

发现：

其他所有手机都正常，只有一部手机显示不正常(上级的手机,哎)；
后来发现该手机比同款同型号手机显示字体略大，才发现该手机系统字体大小被重置；
经过半天测试，出现此问题的必要条件有三：

html页面采用了rem单位，并且是采用js动态计算html的font-size
html页面被加在了APP中的webview中
手机被重设了字体大小

解决方案：

一.移动端解决方案

一行代码：

webView.getSettings().setTextZoom(100);

方案一虽然看起来比较简单，但是如果我们项目已经上线了，就需要重新发版App，就需要更新等一系列操作；再者如果html其他移动端也有使用，这....接下来会发生的事情就靠大家慢慢猜想了！

二、前段兼容，

话不多说直接上代码：

 var docEl = document.documentElement,
                        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                        recalc = function () {
                            var clientWidth = docEl.clientWidth || 375;
                            clientWidth > 750 ? clientWidth = 750 : clientWidth = clientWidth;
                            if (clientWidth){
                                const fz = docEl.style.fontSize = 20 * (clientWidth / 375);
                                docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
                                window.remscale = clientWidth / 375;
                                var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px','')*10000)/10000
                                if (fz !== realfz) {
                                    document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) +"px";
                                }
                            }
                        };
                    if (document.addEventListener){
                        window.addEventListener(resizeEvt, recalc, false);
                        document.addEventListener('DOMContentLoaded', recalc, false);
                    }

这段代码，是跟前端开发一起调试验证OK的

在此，感谢前端同学

嘿嘿，咱是移动端开发者，看到这个代码有些蒙蔽，前端开发者一定看得懂...

以上就是解决方式了，希望对您有所帮助...

最后编辑于：2019.04.28 14:57:35