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之後。