微信公众号开发设置页面字体不跟随系统

小菜不秃头

于 2022-02-09 22:44:30 发布

阅读量2k

点赞数

文章标签：微信 javascript 前端

本文链接：https://blog.csdn.net/qq_45463384/article/details/122851275

版权

微信公众号字体适配 JavaScript WeixinJSBridge 用户体验

关键词由CSDN通过智能技术生成

在开发公众号时碰到的问题，再此记录一下。

微信公众号中网页的字体会根据微信的设置而改变，这样就会导致页面崩溃。影响用户体验。

解决

;(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("onWeixinJSBridgeReady", handleFontSize)
        }
    }
    function handleFontSize() {
        // 设置网页字体为默认大小
        WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 })
        // 重写设置网页字体大小的事件
        WeixinJSBridge.on("menu:setfont", function () {
            WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 })
        })
    }
})()