前端禁止微信自定义字体大小(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
        });
    });
}
})();
相关推荐
袁煦丞4 分钟前
跨平台终端王者Tabby:cpolar内网穿透实验室第632个成功挑战
前端·程序员·远程工作
Sailing6 分钟前
Grafana-mcp-analyzer:基于 MCP 的轻量 AI 分析监控图表的运维神器!
前端·node.js·mcp
阿山同学.26 分钟前
AWS 亚马逊 S3存储桶直传 前端demo 复制即可使用
前端·javascript·aws
Jolyne_34 分钟前
grid 实现完美的水平铺满、间隔一致的自适应布局
前端·css
西洼工作室38 分钟前
【解决导航栏字体图标渲染导致文本闪烁问题】采用腾讯视频的解决方案
前端·css·css3
WindrunnerMax1 小时前
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
前端·架构·github
CodeSheep1 小时前
宇树科技,改名了!
前端·后端·程序员
Hilaku1 小时前
为什么我们用了 Vite 还是构建慢?——真正的优化在这几步
前端·javascript·vite
XI锐真的烦1 小时前
横向对比npm和yarn
前端·npm·node.js
国家不保护废物1 小时前
🧩 React 组件化进阶:像乐高大师一样搭建你的应用世界!
前端·react.js·ai编程