八月, 2017 的归档

禁止APP内Webview页面跟随系统缩放字号

17:05 八月 15th, 2017 by Opril

最近开始做适配移动端的网页,通过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为单位的属性都被放大或者缩小了。为了保证布局不受影响,在网上查阅了一些应对这个问题的解决方案,经过了自己的实践验证后整理如下:
Read more »