Cordova iOS 11.0 Iphone X 状态栏差距

Posted 2023-03-15

【中文标题】Cordova iOS 11.0 Iphone X 状态栏差距

【英文标题】：Cordova iOS 11.0 Iphone X statusbar gap

【发布时间】：2017-10-31 11:44:10

【问题描述】：

在我上一个关于状态栏的 Cordova 问题中得到了一些很大的帮助和反馈，现在我在 ios 11.0 上遇到了新 iPhone X 的问题

我读过这个帖子： https://issues.apache.org/jira/browse/CB-12886

人们强调了在运行 11.0 的 X 上在线出现白条但在其他设备上没有出现的问题（我尝试过 6、7、8）以及我尝试过的帖子发布的解决方案，包括；

离子网络视图插件。

元标记<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

wkwebview 引擎插件

我似乎无法让它正确地安装在 iPhone X 上，我知道如果要让应用程序被苹果接受，我需要解决一些问题。

运行 Xcode 的最新公共版本，所有模拟器都运行 iOS 11.0，我使用 OnSen 作为 UI 元素，我目前已经安装了 ionic web view 插件、网络信息插件、白名单和 oneSignal 插件，没有其他任何东西。

感谢所有帮助

图片显示我的意思：

【参考方案1】：

您是否更新了您的cordova-plugin-splashscreen 启动屏幕文件？

根据这个话题： Cordova app not displaying correctly on iPhone X (Simulator) ，你必须确保你的初始屏幕大小是正确的，之后你的差距应该消失了。

希望对您有所帮助。

【讨论】：

我没有，没有意识到这是个问题吗？昨天通读了该主题，我假设提到的故事板修复纯粹是针对应用程序的黑色部分而不是有问题的差距

@Rlemm1991 我真的不知道启动画面与应用程序视图的屏幕尺寸有何关系，但在我更新此插件启动图像尺寸之前我也遇到了你的问题。似乎iOS会获取您的初始屏幕尺寸来处理您的应用程序屏幕尺寸，如果您为其提供最大尺寸，它将自动为您更改。

没关系，现在我找到了问题的根源，但它与它无关原来它是 onsen ui 的 UI 和 CSS 问题

【参考方案2】：

所以我发现 解决方案 原来我的问题是 OnSen UI 而不是最初想象的网络视图。

viewport-fit=cover

确实解决了这个问题并解决了屏幕间隙，线程Cordova app not displaying correctly on iPhone X (Simulator)中提出的解决方案都可以工作。

对于像我这样正在使用或使用 OnSen UI 的人来说，ons-page 标签导致状态栏和内容之间的差距，为了测试目的而修改 css 以

<ons-page style="position: absolute;top: -20px;">

移除了白条并将内容向上推，尽管以牺牲所有其他设备为代价，但这对我来说是一个开始。

所以其他所有的 CSS 向导都会知道如何正确解决这个问题

【讨论】：

我还应该注意@Yukwong Tsang 在他关于启动画面插件的信息中是正确的，它迫使 iphone X 使用 webview 进入本机分辨率，我将在下一条评论中添加我的解决方案....

Onsen UI 在报告 (github.com/OnsenUI/OnsenUI/issues/2196) 中详细说明了该问题及其使用 ons.platform.isIphoneX() 的解决方案，我在设备就绪功能上添加了此功能以加载备用 css，然后使用以下答案中的主题链接中的建议将条推到位并使用安全区域