我們?nèi)绻褂昧颂詫毜膄lexible.js來(lái)寫(xiě)h5的頁(yè)面布局，會(huì)經(jīng)常遇到一個(gè)很頭疼的問(wèn)題，就是在某些手機(jī)上出現(xiàn)適配不正確，比如我明明設(shè)置了root的font-size大小為36px,可是最后10rem居然是按照39px算的！這個(gè)問(wèn)題該怎么解決呢，其實(shí)思路還是蠻簡(jiǎn)單的，就是進(jìn)行預(yù)先檢測(cè)，比如先給body附上width = 10rem，然后再獲取這個(gè)時(shí)候body的寬度的值，單位為px，再拿它于之前獲得的設(shè)備的寬度進(jìn)行比較，如果相等說(shuō)明該設(shè)備正常解析，如果不相等，那就進(jìn)行等比例適配放小，重新設(shè)置一下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];
}
}
// 處理不規(guī)則的rem計(jì)算
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%';
}
//計(jì)算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);
