首页 > 微信 > 详细

禁止微信内置浏览器调整字体大小,从而保证页面不错乱

时间:2019-04-23 16:16:30      阅读:259      评论:0      收藏:0      [点我收藏+]

最近发现在微信浏览器调整页面的字体大小时,会打乱页面的整个布局,在网上找了找解决的方案,找到了以下此方案,有效的解决了这个问题

目前iOS的解决方案是覆盖掉微信的样式:
/* IOS禁止微信调整字体大小 */
body {
    -webkit-text-size-adjust: 100% !important;
}
安卓的解决方案是通过 WeixinJSBridge 对象将网页的字体大小设置为默认大小,并且重写设置字体大小的方法,让用户不能在该网页下设置字体大小:

/*

 * android禁止微信浏览器调整字体大小

 *  这种方法会导致网页延迟大约1S

 */

     //android禁止微信浏览器调整字体大小
        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 });
            });
        }

这样解决会出现的问题:

   1、如果用户在标准情况下,打开页面。再调整字体大小,那么页面依旧正常。

   2、如果用户先调整了字体大小,再打开页面,页面会变大,一秒之后恢复正常。

   注:采用loading,可解决2的问题

 

参考文章: https://segmentfault.com/q/1010000011631008

禁止微信内置浏览器调整字体大小,从而保证页面不错乱

原文:https://www.cnblogs.com/rachelch/p/10756972.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!