ons-toolbar 和 statusbar iOS 之间的差距答案

【问题标题】：Gap between ons-toolbar and statusbar iOSons-toolbar 和 statusbar iOS 之间的差距
【发布时间】：2018-05-10 18:08:15
【问题描述】：

我将 onsenUI 框架与 Cordova 结合使用以创建混合应用程序。

由于某种原因，我观察到工具栏（文本）和 iOS 状态栏（iPhone 6s、iOS 11）之间的差距大于应有的差距，请参阅链接以获取示例。 example of toolbar

为了解决这个问题并确保问题不是由我自己的代码引起的，我使用了https://onsen.io/v2/api/js/ons-toolbar.html 的工具栏参考的非常简单示例的代码来查看在同一部 iPhone 上发生了什么（没有自己的 css 文件使用）并观察到相同的行为。

我正在使用 Cordova 构建应用程序并使用 config.xml 的基本设置，这是标准 Cordova 应用程序模板的一部分。我申请的是Onsen 2.8.2版本，也试过CDN版本。我正在使用真正的 iPhone 通过 XCode 测试构建。

为了确认它不是 Cordova，我还使用了纯 HTML 和 Framework7 中的一个Kitchensick，对于相同的 Cordova 设置，两者都没有观察到差距，因此与 Onsen 设置有关。

在浏览器中运行应用程序时不显示间隙。

是否有相同的行为和/或知道发生了什么？

【问题讨论】：

【解决方案1】：

您必须将viewport-fit=cover 添加到index.html 的视口meta 标记

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">

【讨论】：

嗨 jcesarmobile，是的，这确实消除了差距。谢谢，这是一个有用的修复。不过有趣的项目，我想知道为什么突然需要它专门用于温泉和例如。不适用于纯 html 或 Framework7 之类的框架。温泉框架肯定发生了一些变化，可能与 iPhone X 的兼容性有关。在“启动画面”之后，只有一件事。在整个屏幕填满之前，我似乎注意到底部有一个小黑条......必须是预覆盖状态。猜猜设置一个与应用颜色匹配的整体背景颜色会隐藏这个。
所有面向 iOS 11 的应用程序都需要此功能。Framework7 可能已将其添加到其模板中。如果您创建一个 Cordova 应用程序，您将在那里看到同样的问题。
我发现使用ons.disableAutoStatusBarFill() 也可以解决问题。对于viewport-fit=cover，此功能有效，但它会向上移动视图并在底部留下一个间隙。所以我现在删除了视口设置。下一个挑战是让这一切都适用于 iPhone X，因为ons.disableAutoStatusBarFill() 不适合该设备，并且可能需要视口解决方案......嗯，这是另一个（stackoverflow）主题。