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

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

一、复现场景

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

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

正常字体大小：

更改过系统设置字体：

二、解决方法

1. 客户端解决

   1. android

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

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

2. H5解决

   1. 在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)) /* 原来设置的值 * 缩放比例 */
      }
      

   2. 在微信中

      (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 });
              });
          }
      })();
      

   3. 在ios中

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

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