zoukankan      html  css  js  c++  java
  • 禁止微信内置浏览器调整字体大小,从而保证页面不错乱

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

    目前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

  • 相关阅读:
    C#中Equals和= =(等于号)的比较)(转载)
    C# 控制台应用程序输出颜色字体
    c#获取当前运行程序所在的目录
    java环境配置
    c#随机产生颜色
    Git学习
    git删除所有提交历史记录
    git忽略项gitegnore配置
    不搭建git服务器对git仓库进行局域网内共享多人合作开发项目
    搭建Git服务器-SCM-Manager
  • 原文地址:https://www.cnblogs.com/rachelch/p/10756972.html
Copyright © 2011-2022 走看看