微信字体大小调整导致的H5页面错乱问题处理

当用户调整微信字体大小时会导致H5页面错乱,解决方案如下:

ios:在css中加入-webkit-text-size-adjust: 100% !important;

  1.  
    body {
  2.  
    -webkit-text-size-adjust: 100% !important;
  3.  
    }

安卓:借助WeixinJSBridge对象来阻止字体大小调整,将此段代码放在在程序的入口页面(例如 index.html / index.ejs等)即可

  1.  
    (function () {
  2.  
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
  3.  
    handleFontSize();
  4.  
    } else {
  5.  
    document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
  6.  
    }
  7.  
    function handleFontSize () {
  8.  
    // 设置网页字体为默认大小
  9.  
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
  10.  
    // 重写设置网页字体大小的事件
  11.  
    WeixinJSBridge.on('menu:setfont', function() {
  12.  
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
  13.  
    });
  14.  
    }
  15.  
    })();

 

 
 
posted @   君临天下之徐少  阅读(774)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示