我们如果使用了淘宝的flexible.js来写h5的页面布局，会经常遇到一个很头疼的问题，就是在某些手机上出现适配不正确，比如我明明设置了root的font-size大小为36px,可是最后10rem居然是按照39px算的！这个问题该怎么解决呢，其实思路还是蛮简单的，就是进行预先检测，比如先给body附上width = 10rem，然后再获取这个时候body的宽度的值，单位为px，再拿它于之前获得的设备的宽度进行比较，如果相等说明该设备正常解析，如果不相等，那就进行等比例适配放小，重新设置一下html的字体大小即可。
/**
*
* @authors zhouzexin@baidu.com
* @date 2016-08-20 18:00:04
* @version 1.0.0.1
*/
;(function (win) {
var doc = win.document;
var docEl = doc.documentElement;
var tid;
// 获取样式值
function getStyle(dom, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(dom, null)[attr];
} else {
return dom.currentStyle[attr];
}
}
// 处理不规则的rem计算
function fixFontSize(width, rem, html) {
var body = doc.getElementsByTagName('body')[0];
body.style.width = '10rem';
var scale = 1;
var bodyWidth = parseInt(getStyle(body, 'width'));
if (bodyWidth != width) {
scale = width / bodyWidth;
rem = rem * scale;
docEl.style.fontSize = rem + 'px';
}
body.style.width = '100%';
}
//计算root元素的字体大小
function refreshRem() {
var html = document.getElementsByTagName('html')[0];
var width = parseInt(getStyle(html, 'width'));
if (width > 768) { // 最大宽度
width = 768;
}
var rem = width / 10; // 将屏幕宽度分成10份， 1份为1rem
docEl.style.fontSize = rem + 'px';
fixFontSize(width, rem);
}
win.addEventListener('resize', function () {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function (e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
})(window);
