前端禁止微信自定义字体大小(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
        });
    });
}
})();
相关推荐
@PHARAOH1 天前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金390411 天前
flutter 仿商场_首页
前端
少卿1 天前
react-native图标替换
前端·react native
熊猫钓鱼>_>1 天前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
JYeontu1 天前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_1 天前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
盛夏绽放1 天前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
少卿1 天前
React Native Vector Icons 安装指南
前端·react native
国家不保护废物1 天前
Vue组件通信全攻略:从父子传到事件总线,玩转组件数据流!
前端·vue.js
写不来代码的草莓熊1 天前
vue前端面试题——记录一次面试当中遇到的题(9)
前端·javascript·vue.js