如何在Safari移动端实现背景全屏显示（解决顶部白条问题）

问题描述 #

在Safari移动端浏览器中，网站顶部出现无法被背景填充的白条，需要实现背景全屏覆盖的效果。

解决方案 #

该问题由Safari的安全区域（Safe Area）机制导致，即便已设置viewport-fit=cover，仍需额外CSS调整让背景延伸至安全区域外。

修改后的CSS代码 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: white;
}

html, body {
    min-height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: linear-gradient(180deg, hsl(250, 15%, 30%), hsl(250, 15%, 10%));
    /* 让内容延伸到安全区域外，消除顶部白条 */
    margin: env(-safe-area-inset-top) env(-safe-area-inset-right) env(-safe-area-inset-bottom) env(-safe-area-inset-left);
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

关键说明 #

• env(-safe-area-inset-top)等负边距属性，会让页面内容向Safari的安全区域外延伸，从而让背景覆盖顶部空白区域。
• 需保留HTML中viewport-fit=cover的meta标签，这是浏览器允许内容延伸到安全区域的前提。

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