Beyaz çubukların çözümünü burada buldum :
Set viewport-fit=covergörüntü alanı üzerinde <meta>etiketi, yani:
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
UIWebView'daki beyaz çubuklar kaybolur:
(Sağladığı siyah alanlarını kaldırmak için çözüm @dpogue altındaki bir yorumda) kullanmaktır LaunchStoryboard görüntüleri ile cordova-plugin-splashscreenvarsayılan olarak Cordova tarafından kullanılan eski fırlatma görüntüleri değiştirmek için. Bunu yapmak için aşağıdakileri iOS platformuna ekleyin 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>
Ardından aşağıdaki boyutlara sahip görselleri oluşturun res/screen/ios(mevcut olanları kaldırın):
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
Siyah çubuklar kaldırıldıktan sonra, iPhone X'in ele alması gereken farklı bir şey daha var: Durum çubuğu "çentik" nedeniyle 20 pikselden daha büyüktür, bu da Cordova uygulamanızın en üstündeki herhangi bir içeriğin onun tarafından gizleneceği anlamına gelir. :
Bir dolguyu piksel cinsinden sabit kodlamak yerine safe-area-inset-*, iOS 11'deki yeni sabitleri kullanarak bunu CSS'de otomatik olarak halledebilirsiniz .
Not: iOS 11.0'da bu sabitleri işleyen işlev çağrıldı, constant()ancak iOS 11.2'de Apple bunu env()( buraya bakın ) olarak yeniden adlandırdı , bu nedenle her iki durumu da kapsamak için her ikisiyle de CSS kuralını aşırı yüklemeniz ve CSS geri dönüş mekanizmasına güvenmeniz gerekir. uygun olan:
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
Sonuç, istenildiği gibidir: Uygulama içeriği tam ekranı kaplar, ancak "çentik" tarafından engellenmez:
Yukarıdaki adımları gösteren bir Cordova test projesi oluşturdum: webview-test.zip
Notlar:
Altbilgi düğmeleri
- Uygulamanızda altbilgi düğmeleri varsa (benimki gibi),
safe-area-inset-bottombunların iPhone X'teki sanal Ana Sayfa düğmesiyle örtüşmesini önlemek için başvurmanız gerekir .
- Benim durumumda,
<body>altbilgi kesinlikle konumlandırıldığı için bunu uygulayamadım, bu yüzden onu doğrudan altbilgiye uygulamam gerekiyordu:
.toolbar-footer{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
cordova-eklentisi-durum çubuğunda
- İPhone X'te durum çubuğu boyutu değişti, bu nedenle iPhone X'te
cordova-plugin-statusbarekranın eski sürümleri hatalı şekilde
- Mike Hartington , gerekli değişiklikleri uygulayan bu çekme talebini oluşturdu .
- Bu
cordova-plugin-statusbar@2.3.0sürümle birleştirildi , bu nedenle güvenli alan eklerine uygulamak için en azından bu sürümü kullandığınızdan emin olun
başlangıç ekranı
- İOS 11 / iPhone X'te LaunchScreen film şeridi kısıtlamaları değişti, yani eklentinin mevcut sürümleri kullanılırken açılış ekranı "atlıyor" gibi görünüyordu ( buraya bakın ).
- Bu, CB-13505 hata raporunda yakalandı , düzeltildi ve PR cordova-ios # 354'te yayınlandı
cordova-ios@4.5.4, bu nedenle cordova-iosplatformun en son sürümünü kullandığınızdan emin olun .
cihaz yönü
- İOS 11.0'da UIWebView kullanırken, dikey> yatay> dikeyden döndürme,
safe-area-insetyeniden uygulanmamasına neden olarak içeriğin tekrar çentik tarafından engellenmesine neden olur ( aşağıdaki yorumda jms ile vurgulandığı gibi).
- Ayrıca uygulama yatay modda başlatılıp ardından dikey olarak döndürülürse
- WKWebView aracılığıyla kullanıldığında bu gerçekleşmez
cordova-plugin-wkwebview-engine.
- Radar raporu: http://www.openradar.me/radar?id=5035192880201728
- Güncelleme : Bu, iOS 11.1'de düzeltilmiş görünüyor
Referans için, bu, açtığım ve bunu yakalayan orijinal Cordova sorunu: https://issues.apache.org/jira/browse/CB-13273
