缘由:内部测试都ok,交给客户看的时候,整天变大,本来7.5rem = 750px,实际上大了很多。
各种情况排除后,发现是客户手机字体大小调整到了特大号
解决办法
getComputedStyle方法能够获取到计算后的样式、大小。
最后优化完的代码如下。
(function (doc, win) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var scale = 1.0;
var ratio = 1;
if(isIPhone) {
if (window.devicePixelRatio == 2) {
scale *= 0.5;
ratio *= 2;
}
if (window.devicePixelRatio == 3) {
scale *= (1/3);
ratio *= 3;
}
}
var text = \'<meta name="viewport" content="initial-scale=\' + scale + \', maximum-scale=\' + scale + \',\' + \' minimum-scale=\' + scale + \', width=device-width,\' + \' user-scalable=no" />\';
document.write(text);
var docEl = doc.documentElement
var resizeEvt = \'orientationchange\' in window ? \'orientationchange\' : \'resize\'
var recalc = function () {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 100 * (clientWidth / 750) + \'px\'
// 解决部分rem特别大的问题
var docElFontSize = docEl.style.fontSize.replace(/px/gi, \'\')
var computedFontSize = win.getComputedStyle(docEl)[\'font-size\'].replace(/px/gi, \'\')
docElFontSize != computedFontSize && (docEl.style.fontSize = docElFontSize * docElFontSize / computedFontSize + \'px\')
}
if (!doc.addEventListener) return
recalc()
win.addEventListener(resizeEvt, recalc, false)
win.addEventListener("DOMContentLoaded", recalc, false)
})(document, window);