iOS版面上的Ionic PWA问题“添加到主屏幕”

Question

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

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

在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之后。