android - Ionic PWA on iOS 布局问题 "Add to Homescreen"

Question

我正在使用 Ionic 2 构建渐进式 Web 应用程序。在浏览器中，在 Android 和 iOS 设备上，布局都是应该的。

在 Android 版 Chrome 和 Safari 上，您可以使用“添加到主屏幕” 按钮将快捷方式添加到网络应用程序。打开时，该应用程序将在没有地址栏的情况下可见，从而为用户提供类似应用程序的体验。

在 Android 上，此功能可以正常运行。然而，在 iOS 上，此功能会导致应用程序布局出现奇怪的问题。

例如:我正在使用 <ion-slides> 以元素符号作为寻呼机图标。在 Android 上，元素符号几乎在页面底部，它们应该在的位置。在iOS上，添加到主屏幕后，子弹几乎到屏幕中央，子弹上方的其余部分略微向上移动。

滑动 是另一个在 iOS 上表现奇怪的事情。从 Safari 添加到主屏幕时，只能滑动页面中移动的部分。 移位部分下方的每一次滑动都无法滑动。

从 iOS 9 到 10.3.1，我一直遇到这些问题

谁能给我一些建议，告诉我如何防止布局表现得太多？

Answer 1

好吧，我的运气。在搜索了不同的解决方案并没有找到任何解决方案之后，我决定将我的问题发布到 Stack Overflow 上。幸运的是，我在一小时内找到了解决方案!

感谢 Stack Overflow 为我提供了神奇的力量!

对于寻找类似问题的解决方案的任何人，请尝试以下操作:

确保在 app.components.ts 中使用以下代码:

this.platform.ready().then(() => {
    statusBar.styleDefault();
    splashScreen.hide();
});

statusBar 和 splashScreen 来自 @ionic-native/status-bar 和 @ionic-native/splash-screen 分别。还要确保将它们作为提供程序加载到 app.module.ts 中。在 package.json 中，您可能希望将它们包含为

"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/status-bar": "3.4.2"

然后运行 ​​npm install。