最近开始做适配移动端的网页，通过APP内部的Webview展示。为了在不同分辨率的设备上都能按相同的布局来展示，使用了rem布局的页面自适应方式：

(function (doc, win) {
  var docEl = doc.documentElement,
  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  recalc = function () {
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) return;
    docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
    alert(docEl.style.fontSize);
  };

  // Abort if browser does not support addEventListener
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

样式表中文字的字号，元素的高宽、间距等都以rem为单位。

但是测试的时候发现了一个很糟糕的问题，当Android手机将系统的字号大小设置为非标准时，页面的布局受到了严重的影响，包括字号在内，所有以rem为单位的属性都被放大或者缩小了。为了保证布局不受影响，在网上查阅了一些应对这个问题的解决方案，经过了自己的实践验证后整理如下：
继续阅读 →