(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 7.5 total 7.5rem
function setRemUnit () {
if(docEl.clientWidth > 750){
//保证PC上最大宽度也是750px
console.log("exec set remUnit > 750")
docEl.style.fontSize = '100px'
docEl.style.width = '750px'
}else{
var rem = docEl.clientWidth / 7.5
docEl.style.fontSize = rem+'px'
}
console.log("exec client width "+docEl.clientWidth+" set remUnit "+docEl.style.fontSize)
//针对部分机型的自动修复
autoFix();
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
setRemUnit();
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
function autoFix(){
var html = document.getElementsByTagName('html')[0];
var settedFs = settingFs = parseFloat(html.style.fontSize).toFixed(4);
var whileCount = 0;
while(true) {
var realFs = parseFloat(window.getComputedStyle(html).fontSize).toFixed(4);
console.log("device html fontSize "+settedFs+" actual rem unit "+realFs);
var delta = realFs - settedFs;
if (Math.abs(delta) >= 1) //不相等
{
/*if (delta > 0) settingFs--; else settingFs++;*/
var lastFontSize=settingFs*settingFs/realFs;
console.log("calc html fontsize "+lastFontSize);
html.setAttribute('style', 'font-size:'+lastFontSize.toFixed(4) + 'px!important');
} else
break;
if (whileCount++ > 10) //如果是比例缩放的话,while最多2次,如果不是这方法就有点凉凉了,所以最好有个出口
break
}
}
}(window, document))
rem适配H5_flexible方案,并解决安卓部分机型微信无法兼容问题
最新推荐文章于 2022-12-27 21:39:09 发布