前一段做活動(dòng)頁鲫凶，在公司運(yùn)營同事手機(jī)上替废，活動(dòng)頁布局是亂的，在瀏覽器和絕大部分手機(jī)上也正常绎晃，這位同事的手機(jī)是安卓蜜唾，在自家app的webview中的打開頁面就錯(cuò)亂了，公司測(cè)試android機(jī)webview中的打開頁面就沒問題庶艾，查看代碼袁余，html的font-size設(shè)置正常，考慮是rem布局的問題咱揍，替換為百分比布局頁面就正常了颖榜，網(wǎng)上搜了搜發(fā)現(xiàn)原來是系統(tǒng)字體大小的問題，這類問題常見于安卓設(shè)備上煤裙，而且是內(nèi)嵌在APP里面的H5頁面掩完，用的解決方案3，安卓同事在APP內(nèi)直接設(shè)置webview的默認(rèn)字體大小硼砰，這樣以后所有的webview打開H5都可以解決這個(gè)問題且蓬。
以下為轉(zhuǎn)載
https://blog.csdn.net/u013778905/article/details/77972841
解決方案
方案一（獲取系統(tǒng)字體大小）
一般設(shè)計(jì)稿750px题翰，為了便于計(jì)算恶阴，設(shè)1rem = 100px; 也就是1rem = 1 * htmlFontSize （htmlFontSize 為 html 元素的字體大小）豹障，在iPhone6 375px寬的屏幕上冯事，htmlFontSize 為50px。
其實(shí)血公，htmlFontSize 除了以px為單位外桅咆，還可以用百分比作為單位，比如你可以設(shè)置htmlFontSize的大小為312.5%坞笙，頁面的布局效果與設(shè)置htmlFontSize 大小為50px是一樣的效果岩饼。
那么問題來了，設(shè)置為百分比單位的時(shí)候薛夜，這個(gè)百分比值是怎么計(jì)算出來的呢籍茧？
瀏覽器默認(rèn)字體大小為 16px，當(dāng)我們使用百分比作為根節(jié)點(diǎn) html 的字體大小時(shí)梯澜，rem 的計(jì)算方式就會(huì)改為
defaultFontSize = 16px
1rem = 1 * htmlFontSize * defaultFontSize
比如375像素寬設(shè)備上：
1rem = 1 * 312.5% *16 = 50 px
這與我們的實(shí)際情況相符寞冯，但是在有些 Android 手機(jī)上，瀏覽器或 webview 的默認(rèn)字體是隨著系統(tǒng)設(shè)置的字體改變的晚伙。
這樣就會(huì)導(dǎo)致默認(rèn)字體大于或小于16px吮龄。從這個(gè)思路出發(fā)，我們只需要找到系統(tǒng)設(shè)置的字體大小就可以正確的計(jì)算htmlFontSize的值了咆疗。
于是寫一個(gè)函數(shù)來獲取defaultFontSize的值：
//獲取系統(tǒng)默認(rèn)字體大小
//designWidth 設(shè)計(jì)稿的寬度
//rem2px 設(shè)計(jì)稿寬度下漓帚，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
};
然后再結(jié)合我們之前計(jì)算 htmlFontSize 的函數(shù)可以得到完整的計(jì)算方式：
!(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);
親測(cè)有效，可以一試午磁！
方案二（獲取html元素實(shí)際寬度）
之前搜索了很久尝抖，也沒有看到很好的解決方案，包括像淘寶的flexible適配方案也沒有解決這個(gè)問題迅皇，今天寫文章的時(shí)候在搜索結(jié)果的后面幾頁昧辽，有一篇文章同樣也是介紹這個(gè)問題的，解決思路還是有點(diǎn)不太一樣的登颓，這位同學(xué)是直接去獲取html的實(shí)際大小和理想值的比值搅荞，然后做 htmlFontSize 的相應(yīng)處理，這里一并給大家分享框咙！
一般咕痛，我們動(dòng)態(tài)計(jì)算好html的font-size之后，我們就啥都不干了扁耐，就走了暇检。
但是，我們現(xiàn)在知道了婉称，我們?cè)O(shè)置的大小不一定是真實(shí)的大小块仆，所以，我們需要在設(shè)置完字體大小之后王暗，再去重新獲取一下html的font-size悔据，看看實(shí)際的這個(gè)值，和我們?cè)O(shè)置的是不是一樣俗壹。
如果不一樣科汗，就要根據(jù)比例再設(shè)置一次。
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字體大斜脸）
推動(dòng)移動(dòng)端同學(xué)進(jìn)行處理头滔，在APP內(nèi)直接設(shè)置webview的默認(rèn)字體大小怖亭。
如：在每個(gè)webview配置webview.getSettings().setTextZoom(100)就可以了。
同樣處理方式的有如微信坤检，大家可以先修改下手機(jī)系統(tǒng)字體大小兴猩，然后再去體驗(yàn)微信里面的游戲/購物（這里是用web實(shí)現(xiàn)的），發(fā)現(xiàn)根本不會(huì)受影響（首先我查看源碼看了下里面的頁面早歇，是用了rem布局的）倾芝。
其實(shí)我建議用第三種方案進(jìn)行處理，因?yàn)檫@樣體驗(yàn)更統(tǒng)一箭跳，但是想想晨另，如果用戶確實(shí)有調(diào)大字體的需求，或者有看小字體的習(xí)慣谱姓，用戶設(shè)置字體大小借尿，你就是不給人家任何變化，也是相當(dāng)不好的體驗(yàn)?zāi)亍?/p>
所以微信就在 設(shè)置-通用-字體大小里面內(nèi)置了設(shè)置字體大小的功能逝段，幫助用戶得到更好的閱讀體驗(yàn)垛玻。
