今天有用户报页面样式出了问题，打开自己手机看了下没问题，那显然是用户调整了什么导致的，考虑到页面是基于rem的，很可能是调整字体大小了。
试了下手机的字体大小，不会这样。又试了下微信字体大小，好，复现了。
现象还比较奇怪，我明明把字体调整大了，为什么反而宽度窄了，难道我当初做了什么特殊处理？看看代码吧。
<script>
(function() {
var b = window.designWidth;
delete window.designWidth;
function a(e) {
e = e || b || 375;
var f = document.documentElement.clientWidth || window.screen.width;
if (f > 640) {
f = 640
} else {
if (f < 320) {
f = 320
}
}
var c = (f / e) * 100;
document.documentElement.style.fontSize = c + "px";
var d = window.getComputedStyle(document.documentElement).fontSize.replace("px", "");
if (d !== c) {
document.documentElement.style.fontSize = c * c / d + "px"
}
}
a();
window.addEventListener("resize",
function() {
a()
},
false)
})();
</script>
果然是有个调整，问题就出在这两行了
var d = window.getComputedStyle(document.documentElement).fontSize.replace("px", "");
if (d !== c) {document.documentElement.style.fontSize = c * c / d + "px"}
这两句是在设置html的fontSize之后再重新检查一次，根据检查结果计算比例，再重新设置一次。回忆起来是几年前针对当时版本还比较旧的微信来做的处理，现在微信本身已经做了部分优化，再这样处理反而适得其反。
于是找了新的方式处理这个问题，直接贴下代码吧，为了页面不闪，代码是放在head头部的。
<script>
(function() {
var b = window.designWidth;
delete window.designWidth;
function a(e) {
e = e || b || 375;
var f = document.documentElement.clientWidth || window.screen.width;
if (f > 640) {
f = 640
} else {
if (f < 320) {
f = 320
}
}
var c = (f / e) * 100;
document.documentElement.style.fontSize = c + "px";
document.addEventListener("WeixinJSBridgeReady",
function() {
WeixinJSBridge.invoke('setFontSizeCallback', {
'fontSize': 0
});
WeixinJSBridge.on('menu:setfont',
function() {
WeixinJSBridge.invoke('setFontSizeCallback', {
'fontSize': 0
});
});
},
false)
};
a();
window.addEventListener("resize",
function() {
a()
},
false)
})();
</script>
<style>
body {-webkit-text-size-adjust: 100% !important;text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;}
</style>
这样用户无论如何调整页面实际的字号都不会变了。效果如下：
