前端禁止微信自定义字体大小(WebView调整H5字体大小)

起因: 写H5页面的时候,用微信打开后发现文字错位。

直接上代码:

IOS

CSS里面写入下面代码

html 复制代码
body{
	-webkit-text-size-adjust: 100% !important;
	text-size-adjust: 100% !important;
	-moz-text-size-adjust: 100% !important;
}

IOS 和 Android

通过使用 WeixinJSBridge 对象阻止字体大小调整。

在项目入口文件中加入下列脚本即可。

javascript 复制代码
(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('setFontSizeCallback', {
        'fontSize': 0
    });
    // 重写设置网页字体大小的事件
    WeixinJSBridge.on('menu:setfont', function () {
        WeixinJSBridge.invoke('setFontSizeCallback', {
        'fontSize': 0
        });
    });
}
})();
相关推荐
接着奏乐接着舞8 小时前
【无标题】
开发语言·前端·javascript
Ian在掘金8 小时前
SSE 还是 WebSocket?从 AI 流式输出聊到实时通信选型
前端·人工智能
雨雨雨雨雨别下啦8 小时前
心理健康AI助手 - 项目总结
前端·javascript·vue.js·人工智能·信息可视化
PILIPALAPENG8 小时前
第4周 Day 3:多 Agent 协作——让 Agent 们"组队干活"
前端·人工智能·python
小江的记录本8 小时前
【Java基础】核心关键字:final、static、volatile、synchronized、transient(附《思维导图》+《面试高频考点清单》)
java·前端·数据结构·后端·ai·面试·ai编程
风之舞_yjf8 小时前
Vue基础(32)_TodoList案例
前端·javascript·vue.js
青春喂了后端8 小时前
IntelliGit 前端订阅边界重构
前端·重构
lichenyang4538 小时前
HarmonyOS HMRouter 路由库 Demo 练习总结:从路由配置到商品管理增删改查
前端
李剑一8 小时前
520了,程序员就得有点儿独特的浪漫
前端·three.js