2017-11-27 36 views
1

하이브리드 응용 프로그램을 만들기 위해 onsenUI 프레임 워크를 Cordova와 함께 사용하고 있습니다.ons-toolbar와 statusbar 사이의 간격 iOS

어떤 이유로 나는 툴바 (텍스트)와 iOS 상태 표시 줄 (iPhone 6s, iOS 11) 사이의 차이를 관찰했는데 그보다 큰 경우 예제 링크를 참조하십시오.

이 문제를 해결하고 내 자신의 코드로 인한 문제가 아닌지 확인하려면 도구 상자 참조의 간단한 예제 코드를 https://onsen.io/v2/api/js/ons-toolbar.html에서 가져 와서 같은 iPhone에서 무슨 일이 일어 났는지 확인하십시오 (자체 CSS 파일 없음 사용) 동일한 행동이 관찰됩니다.

저는 Cordova를 사용하여 앱을 빌드하고 표준 Cordova 앱 템플릿에 포함 된 config.xml의 기본 설정을 사용했습니다. 온천의 2.8.2 버전을 신청 중이고 CDN 버전도 시도했습니다. Xcode를 통해 빌드 테스트를 위해 실제 iPhone을 사용하고 있습니다.

코르도바가 아니라는 것을 확인하기 위해 저는 일반 HTML과 함께 Framework7의 주방 식기도 사용했습니다. 두 가지 모두 동일한 코르도바 설치에서 아무런 차이가 없었기 때문에 뭔가가 온천 설정과 관련되어 있습니다.

브라우저에서 앱을 실행하는 동안 간격이 표시되지 않습니다.

어쨌든 무슨 일이 일어나고있는 동일한 행동 및/또는 아이디어가 있습니까?

답변

0

당신은 당신의 index.html을

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover"> 
+0

안녕 jcesarmobile의 뷰포트 meta 태그에 viewport-fit=cover을 추가해야합니다, 그래이 참 격차를 제거했습니다. 고마워, 그게 유용한 수정이야. 흥미있는 항목이지만, 나는 그것이 갑자기 온천을 위해 특히 필요로하게되는 이유를 예를 들면. 일반 HTML이나 Framework7과 같은 프레임 워크에는 적합하지 않습니다. 온센 프레임 워크에서 뭔가가 변경되었을 것입니다. 어쩌면 iPhone X 호환성과 관련이있을 수도 있습니다. '스플래시 화면'다음에 단 한가지가 있습니다. 전체 화면이 채워지기 전에 바닥에 작은 검정색 막대가 몇 초 동안 있음을 알아 차리는 것처럼 보입니다. 표지가 채워진 상태 여야합니다. 추측하면 앱 색상과 일치하는 전체 배경색을 설정하면이 색상이 숨겨집니다. – Tom

+0

이것은 iOS 11을 타겟팅하는 모든 앱에서 필요합니다. Framework7이 이미 템플릿에 추가했을 수 있습니다. Cordova 앱을 만들면 같은 문제가 발생합니다. – jcesarmobile

+0

'ons.disableAutoStatusBarFill()'을 사용하면이 문제가 해결된다는 것도 알았습니다. 'viewport-fit = cover'와 관련하여이 기능이 작동하지만보기가 위로 이동하고 하단에 간격이 생깁니다. 이제 뷰포트 설정을 제거했습니다. 다음 도전 과제는'ons.disableAutoStatusBarFill()'이 해당 장치에 적합하지 않고 아마도 뷰포트 솔루션을 필요로하기 때문에 iPhone X에서도 모두 작동하도록하는 것입니다. 또 다른 (스택 오버 플로우) 주제입니다. – Tom