移动端首次加载Preloader垂直对齐异常问题求助

问题原因 #

真实移动设备首次加载时，浏览器会因地址栏、状态栏的动态高度变化，导致初始视口高度计算偏差。加上position: absolute配合-webkit-fill-available的兼容性问题，容器高度未正确覆盖全屏，从而出现加载器偏下的情况。触摸屏幕会触发浏览器重绘，视口参数更新后布局恢复正常；刷新时浏览器已缓存视口信息，因此显示正常。

修复方案 #

1. 改用fixed定位（最可靠） #

fixed定位基于视口布局，不受页面滚动或初始视口计算延迟影响，直接实现全屏居中：

.preloader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: fixed; /* 替换absolute */
    top: 0;
    left: 0;
    animation: fadeIn 2s;
}

2. 完善视口配置 #

如果页面未添加视口meta标签，补充后可让浏览器正确识别移动端视口，避免高度计算偏差：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

viewport-fit=cover可让内容延伸到刘海、状态栏区域，确保容器高度准确覆盖屏幕。

3. 触发强制重绘（兜底方案） #

若前两种方案仍有偶现问题，可通过触摸事件触发GPU重绘，快速修正初始布局：

document.addEventListener('touchstart', () => {
    const preloader = document.querySelector('.preloader-container');
    preloader && (preloader.style.transform = 'translateZ(0)');
}, { once: true });

优化后完整代码示例 #

HTML

<body>
    <div class="preloader-container">
        <div class="spinner-container"></div>
    </div>
    <!-- 页面其他内容 -->
</body>

CSS

body {
    background: var(--dark-grey);
    overflow: auto;
    margin: 0;
}

.preloader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    animation: fadeIn 2s;
}

.spinner-container {
    width: 150px;
    height: 150px;
    border: 5px solid var(--primary-colour);
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
    animation: spinAnimation 1s linear infinite;
}

验证步骤 #

• 从新标签页首次打开网站，确认加载器垂直居中
• 触摸屏幕后检查布局是否稳定
• 在不同品牌的安卓、iOS设备上测试兼容性

内容的提问来源于stack exchange，提问作者johnny