微信H5适配解决微信调整字体大小导致H5页面混乱

最新推荐文章于 2025-03-21 21:21:34 发布

置顶

D_evin_

最新推荐文章于 2025-03-21 21:21:34 发布

阅读量1.4k

点赞数 2

文章标签：微信 javascript vue.js html5 页面混乱

本文链接：https://blog.csdn.net/D_evin_/article/details/130685998

版权

文章介绍了如何通过在iOS和Android设备上使用CSS属性以及微信JSBridge来防止用户修改网页内图片大小和字体大小。在app.vue中添加的代码示例展示了如何监听并处理WeixinJSBridge事件，以保持页面样式的一致性。

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

ios通过添加css属性，安卓通过微信属性去阻止，页面图片大小最好使用max-width、max-height或者百分比

app.vue里添加以下代码：

<script>
//强制禁止用户修改微信客户端的字体大小
(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("WeixinJSBridgeReady", handleFontSize);
            document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
        }
    }
    function handleFontSize() {
        // 设置网页字体为默认大小
        WeixinJSBridge.invoke("setFo