"홈 화면에 추가"에 iOS 레이아웃의 ION PWA 문제가 발생했습니다.

Question

Ionic 2를 사용하여 프로그레시브 웹 앱을 제작하고 있습니다. 브라우저에서 Android 및 iOS 장비의 레이아웃이 그대로 유지됩니다.

Android 및 Safari 용 Chrome에서 "홈 화면에 추가" 버튼을 사용하여 웹 앱에 대한 바로 가기를 추가 할 수 있습니다. 앱을 열면 사용자에게 앱과 유사한 환경을 제공하기 위해 주소 표시 줄없이 앱을 볼 수 있습니다.

Android에서이 기능은 아무런 문제없이 작동합니다. 그러나 iOS에서는이 기능으로 인해 앱의 레이아웃에 이상한 문제가 발생합니다.

예 : 나는 총알을 호출 아이콘으로 사용하여 <ion-slides>을 사용하고 있습니다. Android에서는 총알이 페이지 맨 아래에 표시됩니다. iOS에서는 홈 화면에 추가 한 후 글 머리 기호가 화면의 거의 중앙에 있고 나머지는 글 머리 기호 위로 약간 움직입니다.

은 iOS에서 이상한 행동을합니다. Safari에서 홈 화면에 추가하면 이동 된 페이지 부분 만 쓸 수 있습니다. 이하의 모든 스 와이프는 부분을 스 와이프 할 수 없습니다.

나는

이 가

사람이 나에게 너무 많은 밖으로 행동에서 레이아웃을 방지하는 방법에 대한 몇 가지 조언을 줄 수 10.3.1까지 아이폰 OS 9에서 이러한 문제로 실행했습니다?

Answer 1

글쎄 내 운. 다른 솔루션을 찾고 아무 것도 찾지 못한 후에 Stack Overflow에서 내 문제를 게시하기로 결정했습니다. 운이 좋았을 때, 나는 해결책을 1 시간 안에 찾아 냈습니다!

마법의 힘을 제공하기 위해 스택 오버플로를 가져 주셔서 감사합니다!

유사한 문제에 대한 해결책을 찾고 누군가는 시도를 들어 다음

당신이 app.components.ts에 다음 코드를 사용하십시오 : statusBar 및 splashScreen으로

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

@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를 실행할 수 있습니다.