zoukankan      html  css  js  c++  java
  • 移动端微信里打开H5页面,页面字体放大

    背景:移动端H5页面,视口设置<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

       qq、浏览器打开页面字体大小正常

    问题:微信打开页面,页面的字体被放大,感觉整体被放大

    解决:

    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初始化后才可以调用其的方法设置字体到默认大小。


  • 相关阅读:
    Opencv(1)介绍篇
    植被覆盖度制图
    GIS应用开发AO(2)-空间分析ITopologicalOperate
    GIS应用开发AO(1)_普通几何图形绘制
    初识机器学习-人脸识别
    ArcGIS API for javascript4.3——RouteTask
    javascript学习(1)随机点名应用
    生活感悟之六
    生活感悟之五
    生活感悟之四
  • 原文地址:https://www.cnblogs.com/zhuMother/p/12461400.html
Copyright © 2011-2022 走看看