为什么webview中网页字体大小跟样式设置的不同？

一、复现场景

更改系统设置中的字体大小，就会导致webview中的字号也会相应的变化。

Tips: 无论给元素的font-size属性设置的单位是什么，都会产生相应的变化。

正常字体大小：

更改过系统设置字体：

二、解决方法

客户端解决

android

设置webview中的字体默认缩放比例，避免更改系统字体造成影响

WebSettings settings = webView.getSettings();settings.setTextZoom(100);

H5解决

在webview中

js:

// 创建测试元素，并设置font-size属性const testDOM = document.createElement('div');testDOM.style = 'font-size: 10px';document.body.appendChild(testDOM);// 获取设置系统字号后真实font-size值const realFontSize = parseFloat(window.getComputedStyle(testDOM).fontSize);// 删除测试元素document.body.removeChild(testDOM);// 获取字体缩放比例const scale = 10 / realFontSize;// 给html设置缩放变量document.documentElement.style.setProperty('--scale-font-size', `${scale}`)

css:

div {font-size: calc(10px * var(--scale-font-size)) /* 原来设置的值 * 缩放比例 */}

在微信中

(function() {if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {handleFontSize();} else {if (document.addEventListener) {document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);} else if (document.attachEvent) {document.attachEvent("WeixinJSBridgeReady", handleFontSize);document.attachEvent("onWeixinJSBridgeReady", handleFontSize);}}function handleFontSize() {// 设置网页字体为默认大小WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize' : 0 });// 重写设置网页字体大小的事件WeixinJSBridge.on('menu:setfont', function() {WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize' : 0 });});}})();

在ios中

在更改系统字体后，各个应用里中webview里的网页文字大小似乎没有受到影响。但是对于诸如微信、UC浏览器等可以在APP里设置网页字体大小的应用，还是有限制调整字号的需求的。它们调整字体大小是通过给body设置-webkit-text-size-adjust属性实现的，因此只要限制这个属性不被修改即可：

body {-webkit-text-size-adjust: none !important;}