Rozwiązanie białych pasków znalazłem tutaj :
Ustaw viewport-fit=coverna <meta>etykiecie rzutni , tj .:
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
Następnie białe paski w UIWebView znikają:
Rozwiązaniem umożliwiającym usunięcie czarnych obszarów (dostarczonych przez @dpogue w komentarzu poniżej) jest użycie obrazów LaunchStoryboard w cordova-plugin-splashscreencelu zastąpienia starszych obrazów uruchamiania, używanych domyślnie przez Cordovę . Aby to zrobić, dodaj następujące elementy do platformy iOS w config.xml:
<platform name="ios">
<splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
<splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
<splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
<splash src="res/screen/ios/Default@3x~iphone~comany.png" />
<splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
<splash src="res/screen/ios/Default@2x~ipad~comany.png" />
<!-- more iOS config... -->
</platform>
Następnie utwórz obrazy o następujących wymiarach res/screen/ios(usuń wszystkie istniejące):
Default@2x~iphone~anyany.png - 1334x1334
Default@2x~iphone~comany.png - 750x1334
Default@2x~iphone~comcom.png - 1334x750
Default@3x~iphone~anyany.png - 2208x2208
Default@3x~iphone~anycom.png - 2208x1242
Default@3x~iphone~comany.png - 1242x2208
Default@2x~ipad~anyany.png - 2732x2732
Default@2x~ipad~comany.png - 1278x2732
Po usunięciu czarnych pasków jest jeszcze jedna rzecz, która różni się w iPhonie X do rozwiązania: pasek stanu jest większy niż 20 pikseli ze względu na „wycięcie”, co oznacza, że każda zawartość w górnej części aplikacji Cordova będzie zasłonięta. :
Zamiast na safe-area-inset-*stałe kodować dopełnienie w pikselach, możesz obsłużyć to automatycznie w CSS, używając nowych stałych w iOS 11.
Uwaga: w iOS 11.0 funkcja obsługująca te stałe została wywołana, constant()ale w iOS 11.2 Apple zmienił jej nazwę na env()( patrz tutaj ), dlatego aby objąć oba przypadki, musisz przeciążać regułę CSS oboma i polegać na mechanizmie rezerwowym CSS, aby zastosować odpowiedni:
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
Wynik jest zgodny z oczekiwaniami: zawartość aplikacji obejmuje cały ekran, ale nie jest zasłonięta „wycięciem”:
Stworzyłem projekt testowy Cordova, który ilustruje powyższe kroki: webview-test.zip
Uwagi:
Przyciski stopki
- Jeśli Twoja aplikacja ma przyciski stopki (tak jak moja), musisz również zastosować,
safe-area-inset-bottomaby uniknąć ich nakładania się na wirtualny przycisk Home na iPhonie X.
- W moim przypadku nie mogłem tego zastosować,
<body>ponieważ stopka jest absolutnie ustawiona, więc musiałem zastosować ją bezpośrednio do stopki:
.toolbar-footer{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
cordova-plugin-statusbar
- Rozmiar paska stanu zmienił się na iPhonie X, więc starsze wersje
cordova-plugin-statusbarwyświetlają się nieprawidłowo na iPhonie X.
- Mike Hartington utworzył to żądanie ściągnięcia, które wprowadza niezbędne zmiany.
- To zostało włączone do
cordova-plugin-statusbar@2.3.0wydania, więc upewnij się, że używasz przynajmniej tej wersji do zastosowania do wstawek do bezpiecznego obszaru
ekran powitalny
- Ograniczenia dotyczące scenorysu LaunchScreen uległy zmianie na iOS 11 / iPhone X, co oznacza, że ekran powitalny „przeskakuje” podczas uruchamiania podczas korzystania z istniejących wersji wtyczki ( patrz tutaj ).
- Zostało to uchwycone w raporcie o błędzie CB-13505 , naprawiono PR cordova-ios # 354 i wydano w
cordova-ios@4.5.4, więc upewnij się, że używasz najnowszej wersji cordova-iosplatformy.
orientacja urządzenia
- Podczas korzystania z UIWebView w systemie iOS 11.0 obrót z pozycji portret> krajobraz> portret powoduje, że
safe-area-insetnie są one ponownie stosowane, co powoduje ponowne zasłonięcie zawartości przez wycięcie (co zostało podkreślone przez jms w komentarzu poniżej).
- Dzieje się również, jeśli aplikacja zostanie uruchomiona w orientacji poziomej, a następnie obrócona do pionu
- Nie dzieje się tak, gdy używasz WKWebView za pośrednictwem
cordova-plugin-wkwebview-engine.
- Raport radarowy: http://www.openradar.me/radar?id=5035192880201728
- Aktualizacja : wydaje się, że zostało to naprawione w iOS 11.1
Dla porównania, jest to oryginalny numer Cordova, który otworzyłem, który zawiera to: https://issues.apache.org/jira/browse/CB-13273
