JS与CSS实现移动端微信页面禁止字体放大

微信字体放大对移动端布局的影响

微信内置浏览器默认允许用户调整字体大小，这会导致基于微信开发的页面出现字体放大现象。然而，许多移动端网页采用rem作为布局单位，一旦用户触发字体放大，页面整体布局极易发生错乱，严重影响用户体验。为了解决这一问题，我们需要采取技术手段禁止微信的字体放大功能，以下整理了相关的解决方案。

针对Android手机，可以通过JavaScript代码来禁止字体放大。

<span style="font-size:14px;">/* 
 * 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小 
 * 但是会有一个1秒左右的延迟，期间可以考虑通过loading展示 
 * 仅供参考 
 */ 
(function(){ 
 if (typeof(WeixinJSBridge) == "undefined") { 
  document.addEventListener("WeixinJSBridgeReady", function (e) { 
   setTimeout(function(){ 
    WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) { 
     // alert(JSON.stringify(res)); 
    }); 
   },0); 
  }); 
 } else { 
  setTimeout(function(){ 
   WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) { 
    // alert(JSON.stringify(res)); 
   }); 
  },0); 
 } 
})(); 
</span>

针对iPhone手机，可以使用CSS代码来禁止字体放大。

<span style="font-size:14px;"><style type="text/css"> 
 body 
 { 
  -webkit-text-size-adjust: 100% !important; 
  text-size-adjust: 100% !important; 
  -moz-text-size-adjust: 100% !important; 
 } 
</style></span> 

以上即为本文介绍的全部内容，希望这些方法能对大家在开发或工作中有所帮助，同时也欢迎大家继续支持本站。