解决微信调整字体大小导致页面样式混乱的问题

微信具有调整字体大小的功能,然而有时候调整字体大小会导致微信公众号内的H5页面样式混乱。 解决原理:阻止ios和安卓调整字体大小时候的事件。ios通过添加css属性,安卓通过微信属性去阻止。

微信具有调整字体大小的功能,然而有时候调整字体大小会导致微信公众号内的H5页面样式混乱。 解决原理:阻止ios和安卓调整字体大小时候的事件。ios通过添加css属性,安卓通过微信属性去阻止。

注:添加后无法通过外部更改字体大小,根据项目需求运用。

ios系统

body{
    -webkit-text-size-adjust: 100% !important;
}

安卓系统

(function() {
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
    } else {
        document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    }
    function handleFontSize() {
        // 设置网页字体为默认大小
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        // 重写设置网页字体大小的事件
        WeixinJSBridge.on('menu:setfont', function() {
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        });
    }
})();
  • 1.本站主要是为了记录工作、学习中遇到的问题,可能由于本人技术有限,有些不正确的地方,仅供参考。
  • 2.本站中会转载我认为有用的博客文章,添加一些外链网站地址,但这些博客文章、论坛和网站上的内容和我没有关系,不代表我的意见,请网友自己多注意辨别。
  • 3.本站中转载文章会写明来源(点击下方链接按钮即可),感谢原作者的辛苦写作,如果有异议,及时联系我处理,谢谢!
  • 4.欢迎指出有问题的地方,我会尽快修正,谢谢!

本篇文章非原创,点击此处查看原文

系统由 Nginx + Next.js + React + Node + TailWindCss 驱动

沪ICP备20021316号