2017-12-31 77 views
1

상단 툴바와 하단 탭 영역 사이에 a를 맞추려고합니다. iPhone 5-X 및 iOS 10-11에서 작동해야합니다. iOS10을 무시하면 문제는 없지만 이전 버전도 필요합니다. 여기 제 CSS가 있습니다. "margin-top"은 iOS 10에서 오류를 나타냅니다. "padding-top"을 사용하면 iPhone X에서 작동하지 않습니다. 이것은 LoadingController 표지이므로 JS에서 프로그래밍 방식으로 정렬하지 않으려합니다. HTML (컨트롤러를로드하기 위해 HTML에 액세스하는 방법을 알지 못한다.) Google지도에서 프로그래밍 방식으로이 문제를 해결했지만 CSS를 통한 해결책이 있는지 궁금합니다. 나는 모든 최신 버전의 모든 것을 가지고 있고 WKWebView. 내 이온보기가 아래에 있습니다.Ionic iPhone X 안전 영역이 제대로 작동하지 않습니다.

.loading-ios { 
    margin-top: constant(safe-area-inset-top); 
    margin-top: env(safe-area-inset-top); 
    margin-bottom: constant(safe-area-inset-bottom); 
    margin-bottom: env(safe-area-inset-bottom); 

    background-color: white; 
    opacity: 1 !important; 
    position: absolute; 
    top: 64px; 
    bottom: 49px; 
} 

CLI 패키지 :

@ionic/cli-utils : 1.19.0 
ionic (Ionic CLI) : 3.19.0 

글로벌 패키지 :

cordova (Cordova CLI) : 7.1.0 

지역 패키지 :

@ionic/app-scripts : 1.3.12 
Cordova Platforms : ios 4.5.4 
Ionic Framework : ionic-angular 3.9.2 

시스템 :

ios-deploy : 1.9.2 
ios-sim : 5.0.12 
Node  : v8.9.3 
npm  : 5.5.1 
OS   : macOS High Sierra 
Xcode  : Xcode 9.2 Build version 9C40b 

답변

1
margin-top: 20px; /* Status bar height on iOS 10 */ 
    margin-top: constant(safe-area-inset-top); /* Status bar height on iOS 11.0 */ 
    margin-top: env(safe-area-inset-top); /* Status bar height on iOS 11+ */ 

각각 20px 위쪽/아래쪽 이동으로 줄입니다.

관련 문제