iOS的ons-toolbar和statusbar之间的差距 [英] Gap between ons-toolbar and statusbar iOS

问题描述

我将onsenUI框架与Cordova结合使用，以创建一个混合应用程序.

I am using the onsenUI framework in combination with Cordova in order to create a hybrid application.

出于某种原因，我观察到工具栏(文本)和iOS状态栏(iPhone 6s，iOS 11)之间的间隙比应该更大，请参见示例链接. 工具栏示例

For some reason I observe a gap between the toolbar (text) and the iOS statusbar (iPhone 6s, iOS 11) which is larger then should, see the link for an example. example of toolbar

要解决此问题并确保该问题不是由我自己的代码引起的，我在

To troubleshoot this issue and to be sure the issue in not caused by my own code I took the code of the very simple example of the toolbar reference at https://onsen.io/v2/api/js/ons-toolbar.html to see what happened on the same iPhone (no own css file used) and the same behaviour is observed.

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

I am using Cordova to build the App and used the basis settings for the config.xml which are part of the standard Cordova app template. I am applying version 2.8.2 of Onsen, also tried the CDN version. I am using a real iPhone for testing build via XCode.

为确认它不是Cordova，我还使用了普通HTML以及Framework7的小厨，并且在相同的Cordova设置下均未发现间隙，因此与Onsen设置有关.

To confirm it’s not Cordova, I also used plain HTML and also a kitchensick from Framework7 and for both no gap was observed with the same Cordova setup, so something is related with the Onsen setup.

在浏览器中运行应用程序时，差距不会显示.

The gap is not shown while running the app in a browser.

无论如何都具有相同的行为和/或想法，这是怎么回事?

Do anyhow has the same behavior and/or an idea what is going on?

推荐答案

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

You have to add viewport-fit=cover to the viewport meta tag of your index.html

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

这篇关于iOS的ons-toolbar和statusbar之间的差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！