微信或系统字体放大缩小，html页面布局错乱问题

2024年6月8日 158次阅读 来源: kuku的

前言

手机可以调整字体大小的地方：

1、手机QQ、微信、部分Android内置浏览器等非自己开发的App都支持字体大小的调整（我只介绍微信）；

2、iOS、Android系统本身也可以调整字体大小，导致自己开发的App的WebView的页面布局错乱。

调整字体大小后对页面的影响：

我先说一下系统自带调整字体大小功能对自己开发的App中的WebView页面的布局的影响：在iPhone系统设置中的“字体大小”里调整字号变大后，应用中WebView里的排版似乎没有受到影响。但是Android则不行，系统调整字体后App内WebView里的页面计划不能直视，布局错乱的很厉害。

然后我在说一下手机 QQ、微信、部分Android内置浏览器等非自己开发的App提供的调整字体大小的功能：这些App自带有调整字体大小的功能，我们会发现字体变大以后，不管是iOS还是Android页面都会布局错乱。

 

解决方式：

iOS: 

无论是系统自带的调整字体大小，还是一些App自带的调整字体大小iOS是调整WebView字体大小是通过给body添加-webkit-text-size-adjust来实现的，所以只需在body修改-webkit-text-size-adjust属性即可，下面写的这两种方法都可以，选其一即可，方法如下：

    /* IOS微信、UC浏览器阻止字体大小调整 */
    body {
      -webkit-text-size-adjust: none !important;
    }
    body {
      -webkit-text-size-adjust: 100% !important;
    }

Android：

Android则要分为两种情况：

1、阻止系统自带的字体大小调整方式对自己开发的App的WebView的影响需要添加下面的代码到WebView组件设置字体默认缩放比例中。

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

2、对于阻止微信调整字体对页面的影响，我们需要添加下面的代码到页面中：

//Android微信中，借助WeixinJSBridge对象来阻止字体大小调整
(function() {
  if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
    handleFontSize();
  } else {
    if (document.addEventListener) {
      document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    } else if (document.attachEvent) {
      //IE浏览器，非W3C规范
      document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
    }
  }
  function handleFontSize() {
    // 设置网页字体为默认大小
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
    // 重写设置网页字体大小的事件
    WeixinJSBridge.on('menu:setfont', function() {
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
    });
  }
})();

这种方式的缺陷就是，页面先看到的是字体被放大的效果，然后闪回到正常的展示，估计1s，是因为WeixinJSBridge初始化需要一点时间，要等到WeixinJSBridge初始化后才可以调用其的方法设置字体到默认大小。

    原文作者：kuku的
    原文地址: https://blog.csdn.net/weixin_37242696/article/details/80732260
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞