基于REM的CSS在Android4.4及5.0部分机型出现布局错乱

使用rem做为长度单位来布局，如今已经变得非常的常见，因为它可以适应各种屏幕尺寸。rem采用html的font-size属性作为基本单元，假如font-size是18px，那么2rem=18px * 2 = 36px。淘宝的lib-flexible库，就是使用屏幕宽度的十分之一作为html的font-size，来实现屏幕的适配。

最近开发的H5页面，采用的就是rem作为长度单位布局。在iPhone和大部分Android机型上自测均无问题。提交测试后，发现在三星Note4（Android4.4）、魅族m1 note（android4.4.4、Flyme 4.2.0）和华为荣耀上，均出现了布局错乱——一行变成了两行。经过反复调试，最后发现是html的font-size出了问题——实际字体比代码设置的字体要大一些。例如代码里指定为36px，实际上使用的是39px。

开始以为是Android的font boosting问题，通过设置max-height: 999999px，并没有解决，加上其他机型并无此问题，所以可以排除。

由于并没有找到可用的解决方案，只能自己搞定。既然实际字体会比设置的字体要大，那么解决方法就很简单——设置一个小点的字体，使得实际字体的大小就是我需要的字体大小即可：

function fixFontSize() {
  var $html = $('html');
  var remBase = $(window).width() / 10;
  var fontSize = remBase;
  while (true) {
    var actualSize = parseInt( $html.css('font-size') );
    if (actualSize > remBase && fontSize > 10) {
      fontSize--;
      $html.attr('style', 'font-size:' + fontSize + 'px!important');
    } else {
      break;
    }
  }
};

对这个问题，如果有更好的解决方法，也请指出，一起讨论。