“添加到主屏幕”上 iOS 布局问题上的 Ionic PWA答案

【问题标题】：Ionic PWA on iOS layout issue on "Add to Homescreen"“添加到主屏幕”上 iOS 布局问题上的 Ionic PWA
【发布时间】：2017-04-25 20:59:32
【问题描述】：

我正在使用 Ionic 2 构建一个渐进式 Web 应用程序。在浏览器中，无论是 Android 还是 iOS 设备，布局都是应有的。

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

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

例如：我使用带有项目符号的 <ion-slides> 作为寻呼机图标。在 Android 上，项目符号几乎在页面底部，它们应该在的位置。在 iOS 上，将其添加到主屏幕后，项目符号几乎位于屏幕中心，而项目符号上方的其余部分略微向上移动。

滑动是另一个在 iOS 上表现奇怪的东西。当从 Safari 添加到主屏幕时，只能滑动页面中移动的部分。 shifted部分下方的每一次滑动都不能滑动。

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

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

【问题讨论】：

标签： android ios css iphone ionic2

【解决方案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。

【讨论】：