原因：px转rem的缘故，postcss-pxtorem是在html构建完成即加载，css样式可能未加载生效。
/**
* 判断是否是IOS客户端
*/
const isIOS = () => {
const ua = window.navigator.userAgent || "";
return !!ua.match(/iPhone/i);
};
/**
* 判断是否是安卓客户端
*/
const isAndroid = () => {
const ua = window.navigator.userAgent || "";
return !!ua.match(/(Android);?[\s/]+([\d.]+)?/i);
};
/**
* 判断是否是移动端
*/
const isPhone = () => {
return isAndroid() || isIOS() || window.innerWidth <= 900;
};
const initApp = () => {
const isPhoneValue = isPhone();
// rem等比适配配置文件
const baseSize = 14;
const scale =
document.documentElement.clientWidth / (isPhoneValue ? 750 : 2560);
const clientHeight = document.documentElement.clientHeight;
let scaleHeight = 2;
if (isPhoneValue)
scaleHeight = clientHeight / (window.innerHeight > 667 ? 1624 : 1334);
const scaleValue = Math.min(scale, 2, scaleHeight);
document.documentElement.style.fontSize = baseSize * scaleValue + "px";
};
解决方法：body添加属性opacity:0，在未加载完之前不显示。在onload事件中将body的opacity变成1
<body style="opacity: 0;">
<script>
window.onload = function() {
document.getElementsByTagName("body")[0].style.opacity = '1'
}
</script>
</body>