离子标签栏重叠主页按钮（iPhone X - iOS 11） [英] Ionic tab bar overlaps home button (iPhone X - iOS 11)

问题描述

使用iOS 11和iPhone X

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

问题是Ionic应用程序（v.1）标签栏覆盖屏幕的这一部分，因此栏位于主页按钮下：

有谁知道如何修复它？

（请注意：如果您运行新的Ionic应用程序v1在iPhone X模拟器内部，您将在窗口的顶部和底部获得两个黑色空格，但是您可以阻止将viewport-fit = cover添加到index.html内的元标记中）

解决方案

对于Ionic1项目，我发现定位tab-nav可以解决问题。

  .tab-nav {
 margin-bottom：constant（safe-area-inset-bottom）; 
} 
  

With iOS 11 and iPhone X Apple specified every app should live in a "safe area" (due to the virtual home button):

Inset essential content to prevent clipping. [...] For best results, use standard, system-provided interface elements and Auto Layout to construct your interface. All apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.

The problem is a Ionic app (v. 1) with tab bar cover this part of the screen, therefore the bar is under the home button:

Does anyone know how to fix it?

(please note: if you run a new Ionic app v1 inside iPhone X simulator you will get two black spaces, at the top and bottom of the window, but you can prevent this adding "viewport-fit=cover" to your meta tag inside index.html)

解决方案

For an Ionic1 project, I found that targeting the tab-nav did the trick.

.tab-nav {
    margin-bottom: constant(safe-area-inset-bottom);
}

这篇关于离子标签栏重叠主页按钮（iPhone X - iOS 11）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！