移动端线性渐变背景无法全屏填充问题求助

环境配置 #

:root {
    background-image: linear-gradient(180deg, cadetblue, cornflowerblue);
}
body {
    height: 100vh;
    width: 100%;
}

问题现象 #

在移动端Chrome、Safari浏览器横屏模式下，线性渐变背景无法填充整个屏幕，滚动时顶部和底部会出现白边。

尝试调整为以下配置后：

:root {
    background: cornflowerblue;
}
body {
    background-image: linear-gradient(180deg, cadetblue, cornflowerblue);
    height: 100vh;
    width: 100%;
}

:root的纯色背景可以全屏展示，但body上的线性渐变会被截断，不符合需求。之前试过background-attachment、background-size属性，调整height和width的设置，都没解决问题。

解决方案 #

问题根源在于移动端横屏时，100vh是基于初始视口高度计算的，不会适配浏览器地址栏/工具栏隐藏后的实际视口高度；同时body和:root的默认边距、滚动行为也会干扰背景填充。试试下面的配置：

/* 重置默认边距，消除浏览器自带留白 */
:root, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* 用动态视口高度适配移动端工具栏变化，确保背景始终覆盖全屏 */
:root {
    min-height: 100vh;
    min-height: 100dvh;
    background-image: linear-gradient(180deg, cadetblue, cornflowerblue);
    /* 固定背景位置，避免滚动时位移 */
    background-attachment: fixed;
    background-size: cover;
}

body {
    min-height: inherit;
    width: 100%;
}

关键说明 #

• 100dvh：动态视口高度，会实时适配浏览器工具栏/地址栏的显示状态，比传统100vh更适配移动端场景。
• min-height替代height：既保证内容不足时背景铺满全屏，又能在内容超出时让背景跟随延伸，不会被截断。
• background-attachment: fixed：让背景固定在视口，不会随页面滚动而移位。

如果遇到不支持dvh的老版本浏览器，可以加降级方案：

:root {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}

配合以下JS代码：

// 初始化动态视口高度变量
function setVH() {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 页面加载、窗口 resize、横纵屏切换时更新变量
window.addEventListener('load', setVH);
window.addEventListener('resize', setVH);
window.addEventListener('orientationchange', setVH);

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