微信内置浏览器禁止调整字体大小的方法

最近公司搞了一个活动H5页面,页面在微信浏览器中打开,但是发现如果用户修改了手机默认字体大小,页面上写的输入框就会错位,为了解决问题,想到了只要禁止微信浏览器调整字体大小就可以了,以下是具体方法

1.在head标签中增加 
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name=”wap-font-scale” content=”no”>
2.安卓和ios手机通用js
  <!-- 强制禁止用户修改微信客户端的字体大小---begin--- -->
<script>
  (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 });
          });
      }
  })();
</script>
<!-- 强制禁止用户修改微信客户端的字体大小---end--- -->
3.针对ios手机调整样式
#body {
    /* ios系统字体被手动调大优化 */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值