Question

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

在Chrome for Android和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。

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

1 个答案: