Android 爱奥尼亚PWA关于iOS布局的问题；“添加到主屏幕”；

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

在Chrome for Android和Safari上，您可以使用“添加到主屏幕”按钮向web应用程序添加快捷方式。打开后，该应用程序将不带地址栏而可见，为用户提供类似应用程序的体验

在安卓系统上，该功能可以正常工作。但在iOS上，此功能会导致应用程序的布局出现奇怪的问题

例如：我正在使用带有项目符号的

作为寻呼机图标。在安卓系统上，项目符号几乎位于页面底部，它们应该在那里。在iOS上，将其添加到主屏幕后，项目符号几乎位于屏幕中心，项目符号上方的其余部分略微向上移动

刷卡是另一种在iOS上表现古怪的行为。当从Safari添加到主屏幕时，只能滑动页面移动的部分。移位部分下方的每次刷卡都不能刷卡

从iOS 9到10.3.1，我都遇到过这些问题

---

有没有人能给我一些建议，如何防止布局表现得如此糟糕？

好吧，我真走运。在搜索了不同的解决方案但没有找到任何解决方案后，我决定将我的问题发布到堆栈溢出上。幸运的是，我自己在一小时内就找到了解决办法

谢谢你为我提供了神奇的力量

对于正在搜索类似问题解决方案的任何人，请尝试以下操作：

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

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

分别来自

@ionic native/状态栏

和

@ionic native/闪屏

的

状态栏和
@ionic native/闪屏
。另外，请确保在app.module.ts中以提供者的身份加载它们。在
package.json
中，您可能希望将它们作为

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

然后运行
npm安装