前端禁止微信自定义字体大小(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
        });
    });
}
})();
相关推荐
光影少年几秒前
如何进行前端性能优化?
前端·性能优化
Dxy12393102167 分钟前
js如何把字符串转数字
开发语言·前端·javascript
爱写bug的野原新之助15 分钟前
爬虫之补环境:加载原型链
前端·javascript·爬虫
陈广亮23 分钟前
工具指南7-Unix时间戳转换工具
前端
NGBQ1213830 分钟前
Adobe-Premiere-Pro-2026-26.0.2.2-m0nkrus 全解析:专业视频编辑软件深度指南
前端·adobe·音视频
北城笑笑31 分钟前
Chrome:Paused in debugger 的踩坑实录:问题排查全过程与终极解决方案( 在调试器中暂停 )
前端·chrome
haorooms33 分钟前
Promise.try () 完全指南
前端·javascript
kyriewen34 分钟前
闭包:那个“赖着不走”的家伙,到底有什么用?
前端·javascript·ecmascript 6
斌味代码37 分钟前
el-popover跳转页面不隐藏,el-popover销毁
前端·javascript·vue.js
该怎么办呢38 分钟前
cesium核心代码学习-01项目目录及其基本作用
前端·3d·源码·webgl·cesium·webgis