【微信页面】移动端微信页面禁止字体放大

本文介绍如何禁用微信内的字体放大功能以保持移动端页面布局稳定。针对Android设备,提供了JavaScript代码实现;对于iPhone设备,则通过CSS代码来达到目的。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

   由于微信自带字体放大功能,因此基于微信的页面都可以通过微信进行字体放大,但是有些情况下这并不是我们想要的,因为很多移动端页面的开发都是使用rem作为单位的,当使用微信进行字体放大是,会导致页面的整体布局乱掉的情况出现,这对用户体验来说是极其不友好的,我们希望能够禁止微信的字体放大功能,下面我通过查找资料找到的一些解决方法,至于移动端页面是如何开发的及rem单位的特点,这里不做赘述,详情请参考我的文章"浅谈移动端页面设计的门道"一文。

1.安卓手机禁止字体放大js代码

  1. * 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小 
  2.  * 但是会有一个1秒左右的延迟,期间可以考虑通过loading展示 
  3.  * 仅供参考 
  4.  */  
if (typeof(WeixinJSBridge) == "undefined") { 
      document.addEventListener("WeixinJSBridgeReady", function (e) {  
      setTimeout(function(){ 
          // 直接修改用户设置的/默认字体 
          WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {   
          });  
          // 重写设置网页字体大小的事件
          WeixinJSBridge.on('menu:setfont', function() {
          WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
          });
      },0);  
      });  
  } else {  
      setTimeout(function(){  
        WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {  
      });  
      },0);  
  }
2.iphone手机禁止字体放大,css代码
[css]  view plain  copy
  1. <span style="font-size:14px;"><style type="text/css">  
  2.     body  
  3.     {  
  4.         -webkit-text-size-adjust: 100% !important;  
  5.         text-size-adjust: 100% !important;  
  6.         -moz-text-size-adjust: 100% !important;  
  7.     }  
  8. </style></span>  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值