iPhone Safari顶部状态栏空白是什么？如何修改其颜色？

你遇到的是iPhone Safari的**状态栏（显示时钟、电量的顶部区域）**适配问题，默认情况下Safari会保留安全区域空白，要修改它的显示效果，需要结合meta标签和CSS调整：

步骤1：更新Viewport Meta标签 #

首先在HTML的<head>里添加/修改viewport标签，确保页面能延伸到安全区域：

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

viewport-fit=cover是关键，它会让页面内容覆盖整个设备视口，包括状态栏下方的安全区域，解决默认的空白问题。

步骤2：控制状态栏文字与背景样式 #

根据你的需求（背景图延伸/纯色状态栏）选择对应的设置：

情况A：让背景图延伸到状态栏下方 #

添加这个meta标签，让状态栏半透明，页面背景能透出来，同时状态栏文字变为白色：

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

此时你的背景图会覆盖到状态栏区域，状态栏呈现半透明效果，文字为白色。

情况B：设置纯色状态栏 #

如果不需要背景图延伸，而是给状态栏设置固定颜色，添加theme-color标签，并配合状态栏样式：

<!-- 设置状态栏背景色为你需要的颜色 -->
<meta name="theme-color" content="#2c3e50">
<!-- 控制状态栏文字颜色：black=白色文字，default=黑色文字 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

步骤3：调整CSS适配 #

修改你的CSS，确保页面能完全覆盖视口：

html,
body {
    height: 100vh; /* 用vh确保覆盖整个视口高度 */
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body {
    background-image: url(./images/wei-zeng-WsgNGq1aqIQ-unsplash.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    /* 如果页面顶部有导航栏等内容，需要给内容加上安全区域的内边距，避免被状态栏遮挡：
    padding-top: env(safe-area-inset-top);
    */
}

关键说明 #

• env(safe-area-inset-top)是CSS变量，代表设备顶部安全区域的高度，用于避免页面内容被状态栏、刘海遮挡
• apple-mobile-web-app-status-bar-style的可选值：
  • default：默认白色状态栏，黑色文字
  • black：黑色状态栏，白色文字
  • black-translucent：半透明黑色状态栏，白色文字，页面内容延伸至状态栏下方

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