关于用户设置微信上的字体,导致h5应用页面字体也随之改变,影响视图效果的问题

最新推荐文章于 2024-09-06 22:33:47 发布

海上楼月镜中花〃

最新推荐文章于 2024-09-06 22:33:47 发布

阅读量1.1k

点赞数

文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/weixin_42700654/article/details/109598771

版权

有些上了年纪的用户在使用手机时,会设置微信或手机里的字体大小,会把字体设置很大,便于使用和阅读,但是,在设置了字体大小后,用户打开一些H5应用后会发现,应用里的字体也随之变大,会导致页面变形等问题,鄙人知道的解决方法有一下几种:

1.前端开发可以不给标签设置固定的高度,让高度随内容撑开,这样整体就会随字体变大而撑开,

2.在Android微信中，也可以借助WeixinJSBridge对象来阻止字体大小调整。实测有效,鄙人是将这段代码放在了app.vue文件中的script标签中

(function() {
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
    } else {
        document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    }
    function handleFontSize() {
        // 设置网页字体为默认大小
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        // 重写设置网页字体大小的事件
        WeixinJSBridge.on('menu:setfont', function() {
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
        });
    }
 })();