zoukankan      html  css  js  c++  java
  • 解决微信调整字体大小导致页面样式混乱的问题

    微信具有调整字体大小的功能,然而有时候调整字体大小会导致微信公众号内的H5页面样式混乱。
    解决原理:阻止ios和安卓调整字体大小时候的事件。ios通过添加css属性,安卓通过微信属性去阻止。

    注:添加后无法通过外部更改字体大小,根据项目需求运用。

    ios系统:

    body{
        -webkit-text-size-adjust: 100% !important;
    }

    安卓系统:

    (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 });
            });
        }
    })();

     注:安卓使用了微信的JS桥。

  • 相关阅读:
    maven
    Antd@4.x Form的常用方法
    数组排序 js
    链式调用
    react 非登陆页面得公共部分配置方法
    react异常处理
    Field 输入框的bug
    promise的用法
    异步return公共数据方法,
    小程序打开pdf文件
  • 原文地址:https://www.cnblogs.com/luoyihao/p/12385975.html
Copyright © 2011-2022 走看看