如何防止布局与 iOS 状态栏 IONIC 重叠

Question

一张图片价值1k字：

你可以看到 battery/wifi 的黑色图标与白色汉堡菜单重叠。

我的代码如下：

<ion-header>
    <ion-menu-toggle></ion-menu-toggle>
    <h1> Some text><h1>
</ion-header

我会做出不会给 android 布局带来麻烦的更改，因为 android 的当前布局是成功的。

Answer 1

您可以使用 env() 获取 safe-area-inset-top 并设置等于它的填充或边距：https://developer.mozilla.org/en-US/docs/Web/CSS/env().

Ionic 还将它们定义为全局 css 变量，您可以使用这些变量：https://ionicframework.com/docs/theming/advanced#global-variables

How to prevent layout from overlapping with iOS status bar IONIC