web移动端开发踩坑

1.响应式布局。
经过开发测试，我在一些布局中使用了固定的单位px导致在微信环境中在字体放大的情况下，会出现布局错乱。
解决方法：
第一种：使用rem布局，参考：https://www.jianshu.com/p/3f6c9fb0dd57
第二种：强制禁止微浏览器环境放大字体；
ios：

 body {
      /* IOS禁止微信调整字体大小 */
      -webkit-text-size-adjust: 100% !important;
      text-size-adjust: 100% !important;
      -moz-text-size-adjust: 100% !important;
    }

android:

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