移动端内置浏览器的字体被手动放大优化，强制转回默认字体大小

前言

前端开发在做移动的时候，会遇到适配问题，就是不同手机不同机型的屏幕大小和分辨率那些事不一样的，所以需要我们去做适配，一般都是转换成"vw"或者"rem"单位最多，你是做移动端的H5页面的话，用户打开你的H5页面，如果用户的内置浏览器被她手动放大了的话，那么咱们的页面就会发生变形和字体往下移动，为此现在分别为ios系统（苹果手机）和安卓手机做优化，不管用户的字体被放多大，最后都会以默认大小的字体显示。

---

加QQ技术交流群741843152，一起讨论哦~~~~
欢迎访问我个人博客，里面有更多干货哟~~：点击即可访问
关注博主微信公众号，获取更多关于前端的干货哦

一、安卓手机优化，在Javascript里面设置

  // 适配安卓系统微信内置浏览器字体被放大优化
  (function() {
    if (typeof window.WeixinJSBridge == "object" && typeof window.WeixinJSBridge.invoke == "function") {
      handleFontSize();
    } else {
      if (document.addEventListener) {
        document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
      } else if (document.attachEvent) {
        //IE浏览器，非W3C规范
        document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
      }
    }
    function handleFontSize() {
      // 设置网页字体为默认大小
      window.WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
      // 重写设置网页字体大小的事件
      window.WeixinJSBridge.on('menu:setfont', function() {
        window.WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
      });
    }
    })()

二、Ios系统（苹果手机端优化），在CSS设置即可

  #body {
    /* ios系统字体被手动调大优化 */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
  }

写完这两个就优化完成啦~~~~