H5分享链接，禁止微信浏览器放大字体导致排版错乱不适配问题

最新推荐文章于 2023-12-05 16:41:42 发布

墨姿狸

最新推荐文章于 2023-12-05 16:41:42 发布

阅读量576

点赞数 1

分类专栏： js HTML 文章标签： html5 javascript webview

本文链接：https://blog.csdn.net/weixin_45759427/article/details/119568588

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

当APP内的H5链接需要禁止webview缩放字体

html{-webkit-text-size-adjust:none;}

需要安卓前端配置：
webview.getSettings().setTextZoom(100),这个方法可以设置webview内部字体的缩放比例

当分享至微信浏览器时，需要在H5内配置以下代码禁止微信浏览器对H5页面内的字体缩放

<body style="-webkit-text-size-adjust: 100%!important;">
    @RenderBody()
     <script type="text/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 });
                });
            }
        })();
    </script>     
 
</body>

墨姿狸

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
H5分享链接，禁止微信浏览器放大字体导致排版错乱不适配问题

当APP内的H5链接需要禁止webview缩放字体需要安卓前端配置：webview.getSettings().setTextZoom(100),这个方法可以设置webview内部字体的缩放比例当分享至微信浏览器时，需要在H5内配置以下代码禁止微信浏览器对H5页面内的字体缩放<body style="-webkit-text-size-adjust: 100%!important;"> @RenderBody() <script type="text/javasc
复制链接

扫一扫