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