H5开发之--前端兼容（一）

用户自定义字体大小问题

微信或者手机都有个强大的功能，就是用户可以自定义浏览器或者系统的字体大小，这个对于我们这种要求页面跟设计稿呈现必须一致的前端来说，简直就是灾难。
先说这种灾难的入口。
就是这里：

微信修改字体入口

微信修改字体入口

曾经尝试用vh，rem，em ,px 解决，但是实际并没什么卵用,
那么怎么办呢？

IOS 不允许字体修改

html bdoy {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

IOS 很easy ，但是安卓就没那么简单了，安卓需要借助微信事件

Android 不允许修改字体

页面加载的的时候调用initFontSize(), 通过微信回调设置网页字体为默认大小！

 initFontSize () {
      if (typeof window.WeixinJSBridge == 'object' && typeof window.WeixinJSBridge.invoke == 'function') {
        this.handleFontSize()
      } else {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.handleFontSize, false)
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.handleFontSize)
          document.attachEvent('onWeixinJSBridgeReady', this.handleFontSize)
        }
      }
    },
handleFontSize () {
      // 设置网页字体为默认大小
      window.WeixinJSBridge.invoke('setFontSizeCallback', {
        'fontSize': 0
      })
      // 重写设置网页字体大小的事件
      window.WeixinJSBridge.on('menu:setfont', function () {
        window.WeixinJSBridge.invoke('setFontSizeCallback', {
          'fontSize': 0
        })
      })
    }
  }

说到这里顺便说一下关于前端几个单位

绝对单位

单位	description	remark
cm	厘米
mm	豪米
in	英寸 (1in = 96px = 2.54cm)
px	像素(css 像素)
pt	厘米
pc	厘米

相对单位

单位	description	remark
em	基准点为父节点字体的大小，如果自身定义了font-size按自身来计算
rem	可理解为”root em”, 相对根节点html的字体大小来计算	目前前端普遍都是采用这种方案，可以通过控制根元素来适配各种分辨率
vw	viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh	viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin	min(vw,vh)
vmax	max(vw,vh)

更多关于单位的可以参考这里

前端行业做移动端会普遍默认用rem或em,是因为可以通过控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果

rem在移动端应用还可以参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)

(function (e, t) {
  var n = t.documentElement,
    d = e.devicePixelRatio || 1
  function i () {
    var e = n.clientWidth / 3.75
    n.style.fontSize = e + 'px'
  }
  if (
    ((function e () {
      t.body
        ? (t.body.style.fontSize = '16px')
        : t.addEventListener('DOMContentLoaded', e)
    })(),
    i(),
    e.addEventListener('resize', i),
    e.addEventListener('pageshow', function (e) {
      e.persisted && i()
    }),
    d >= 2)
  ) {
    var o = t.createElement('body'),
      a = t.createElement('div');(a.style.border = '.5px solid transparent'),
      o.appendChild(a),
      n.appendChild(o),
      a.offsetHeight === 1 && n.classList.add('hairlines'),
      n.removeChild(o)
  }
})(window, document)