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

前言

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

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞