解决前端rem在某些机器上适配不正确的方法

我们如果使用了淘宝的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);