修复 100vh 菜单与 iPhone 顶部栏重叠的问题

Question

我面临一个问题，绿色背景颜色出现在本应完全红色的菜单后面。菜单设计为填充整个屏幕高度 (100vh)，但在 iPhone 上，顶部栏导致其无法完全延伸到屏幕顶部。有办法解决这个问题吗？

这是我的菜单CSS

    background: red;
    position: fixed;
    z-index: 9;
    top: 0;
    left: -100vw;
    width: 100vw;
    max-width: 100%;
    height: 100vh;

我附上了一张图片供参考。这仅用于说明目的。干杯！

Answer 1

在 iPhone 上，状态栏后面的区域采用机身背景颜色，但它实际上并不是机身本身的一部分。页面的第一个元素出现在状态栏下方；甚至正文的上边距也出现在状态栏下方。 100vh 不包括状态栏。

如果您希望状态栏背景是身体背景以外的颜色，您可以使用

theme-color

元标记：

<meta name="theme-color" content="red" />