Joker Chor

超细节 超简单解决rem引起的页面抖动问题
2025年2月11日·13 次阅读

原因：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>
> cd ..