前一段做活动页，在公司运营同事手机上，活动页布局是乱的，在浏览器和绝大部分手机上也正常，这位同事的手机是安卓，在自家app的webview中的打开页面就错乱了，公司测试android机webview中的打开页面就没问题，查看代码，html的font-size设置正常，考虑是rem布局的问题，替换为百分比布局页面就正常了，网上搜了搜发现原来是系统字体大小的问题，这类问题常见于安卓设备上，而且是内嵌在APP里面的H5页面，用的解决方案3，安卓同事在APP内直接设置webview的默认字体大小，这样以后所有的webview打开H5都可以解决这个问题。
以下为转载
https://blog.csdn.net/u013778905/article/details/77972841
解决方案
方案一（获取系统字体大小）
一般设计稿750px，为了便于计算，设1rem = 100px; 也就是1rem = 1 * htmlFontSize （htmlFontSize 为 html 元素的字体大小），在iPhone6 375px宽的屏幕上，htmlFontSize 为50px。
其实，htmlFontSize 除了以px为单位外，还可以用百分比作为单位，比如你可以设置htmlFontSize的大小为312.5%，页面的布局效果与设置htmlFontSize 大小为50px是一样的效果。
那么问题来了，设置为百分比单位的时候，这个百分比值是怎么计算出来的呢？
浏览器默认字体大小为 16px，当我们使用百分比作为根节点 html 的字体大小时，rem 的计算方式就会改为
defaultFontSize = 16px
1rem = 1 * htmlFontSize * defaultFontSize
比如375像素宽设备上：
1rem = 1 * 312.5% *16 = 50 px
这与我们的实际情况相符，但是在有些 Android 手机上，浏览器或 webview 的默认字体是随着系统设置的字体改变的。
这样就会导致默认字体大于或小于16px。从这个思路出发，我们只需要找到系统设置的字体大小就可以正确的计算htmlFontSize的值了。
于是写一个函数来获取defaultFontSize的值：
//获取系统默认字体大小
//designWidth 设计稿的宽度
//rem2px 设计稿宽度下，1rem的宽度
function adapt(designWidth, rem2px){
var d = window.document.createElement('p');
d.style.width = '1rem';
d.style.display = "none";
var head = window.document.getElementsByTagName('head')[0];
head.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
return defaultFontSize
};
然后再结合我们之前计算 htmlFontSize 的函数可以得到完整的计算方式：
!(function(doc, win, designWidth, rem2px) {
var docEl = doc.documentElement,
defaultFontSize = /*adapt(designWidth, rem2px),*/16,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = win.innerWidth
|| doc.documentElement.clientWidth
|| doc.body.clientWidth;
if (!clientWidth) return;
if (clientWidth < 750) {
docEl.style.fontSize = clientWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
} else {
docEl.style.fontSize = '625%';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window, 750, 100);
亲测有效，可以一试！
方案二（获取html元素实际宽度）
之前搜索了很久，也没有看到很好的解决方案，包括像淘宝的flexible适配方案也没有解决这个问题，今天写文章的时候在搜索结果的后面几页，有一篇文章同样也是介绍这个问题的，解决思路还是有点不太一样的，这位同学是直接去获取html的实际大小和理想值的比值，然后做 htmlFontSize 的相应处理，这里一并给大家分享！
一般，我们动态计算好html的font-size之后，我们就啥都不干了，就走了。
但是，我们现在知道了，我们设置的大小不一定是真实的大小，所以，我们需要在设置完字体大小之后，再去重新获取一下html的font-size，看看实际的这个值，和我们设置的是不是一样。
如果不一样，就要根据比例再设置一次。
function htmlFontSize(){
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var width = w > h ? h : w;
width = width > 720 ? 720 : width
var fz = ~~(width*100000/36)/10000
document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz +"px";
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";
}
}
方案三（客户端固定webview字体大小）
推动移动端同学进行处理，在APP内直接设置webview的默认字体大小。
如：在每个webview配置webview.getSettings().setTextZoom(100)就可以了。
同样处理方式的有如微信，大家可以先修改下手机系统字体大小，然后再去体验微信里面的游戏/购物（这里是用web实现的），发现根本不会受影响（首先我查看源码看了下里面的页面，是用了rem布局的）。
其实我建议用第三种方案进行处理，因为这样体验更统一，但是想想，如果用户确实有调大字体的需求，或者有看小字体的习惯，用户设置字体大小，你就是不给人家任何变化，也是相当不好的体验呢。
所以微信就在 设置-通用-字体大小里面内置了设置字体大小的功能，帮助用户得到更好的阅读体验。
网友评论