10

对于 iOS 11 和 iPhone X，Apple 指定每个应用程序都应位于“安全区域”（由于虚拟主页按钮）：

在此处输入图像描述

插入基本内容以防止剪辑。[...] 为获得最佳效果，请使用系统提供的标准界面元素和自动布局来构建您的界面。所有应用程序都应遵守 UIKit 定义的安全区域和布局边距，以确保根据设备和上下文进行适当的插入。安全区域还可以防止内容与状态栏、导航栏、工具栏和选项卡栏重叠。

问题是带有标签栏的 Ionic 应用程序（第 1 版）覆盖了屏幕的这一部分，因此该栏位于主页按钮下方：

在此处输入图像描述

有谁知道如何修理它？

（请注意：如果你在 iPhone X 模拟器中运行一个新的 Ionic 应用程序 v1，你会在窗口的顶部和底部看到两个黑色空间，但你可以防止这种情况在你的元标记中添加“viewport-fit=cover” index.html)

4

4 回答 4

5

对于 Ionic 4 项目，这将是：
app.scss

body {
  margin-top: env(safe-area-inset-top);
  margin-top: constant(safe-area-inset-top);
}

ion-tab-bar {
  margin-bottom: env(safe-area-inset-bottom);
}

env适用于更新的 iOS11 版本，constant适用于较旧的版本。

于 2019-10-21T17:58:41.537 回答
3

您应该能够将此答案中概述的相同原则应用于Ionic v1 页脚，即

.bar-footer {
    margin-bottom: constant(safe-area-inset-bottom);
}

（或类似的东西 - 我没有测试过这个）

于 2017-09-20T13:01:45.603 回答
1

对于一个 Ionic1 项目，我发现以 tab-nav 为目标就可以了。

.tab-nav {
    margin-bottom: constant(safe-area-inset-bottom);
}
于 2017-10-02T15:18:35.323 回答
0

您可以向自定义 tabBar 主视图添加约束，以将其连接到底部 safeAreaLayoutGuide。

yourView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true
于 2017-09-29T00:49:30.247 回答