Aplikasi Cordova tidak ditampilkan dengan benar di iPhone X (Simulator)

121

Saya menguji aplikasi berbasis Cordova saya kemarin di iPhone X Simulator di Xcode 9.0 (9A235) dan tidak terlihat bagus. Pertama, alih-alih mengisi area layar penuh, ada area hitam di atas dan di bawah konten aplikasi. Dan lebih buruk lagi, antara konten aplikasi dan hitam ada dua bilah putih.

Menambahkan cordova-plugin-wkwebview-enginesehingga Cordova merender menggunakan WKWebView (bukan UIWebView) memperbaiki bilah putih. Oleh aplikasi saya tidak dimigrasikan dari UIWebView ke WKWebView karena masalah kinerja dan kebocoran memori saat menggunakan cordova-plugin-wkwebview-engineyang terjadi saat memuat gambar yang diunduh dari Inapp Purchase konten yang dihosting ke kanvas HTML5 ( file://akses langsung oleh Webview tidak dimungkinkan karena pembatasan keamanan di WKWebView jadi data gambar harus dimuat melalui cordova-plugin-file).

Tangkapan layar ini menunjukkan aplikasi uji dengan latar belakang biru yang disetel di <body>. Di atas dan di bawah UIWebView, Anda dapat melihat bilah putih, tetapi tidak dengan WKWebView:


(sumber: pbrd.co )


(sumber: pbrd.co )

Kedua Tampilan Web Cordova menunjukkan area hitam jika dibandingkan dengan aplikasi asli yang memenuhi area layar penuh:

ios  cordova  phonegap  iphone-x 
— DaveAlden
sumber
Menarik dengan wkwebview. Dalam permainan saya, saya tidak memiliki lebar penuh, tetapi juga mengimbangi dari tengah. Dalam uiwebview itu mempertahankan ukuran yang sama, tetapi setidaknya berpusat.
— agmcleod
Saya mengalami masalah ini juga jadi saya membuat beberapa solusi dengan hanya css lihat pt.stackoverflow.com/a/263460/55076
— Igor Trindade
Saya mengalami masalah ini juga. Hanya menambahkan <meta>tag ke file index.hml cordova saya seperti yang lain yang tercantum di bawah ini tidak berfungsi. Saya menjalankan Cordova 7x dengan cordova-ios 4.5.4 - apakah ada hal lain yang perlu saya lakukan?
— rolinger

Jawaban:

246

Saya menemukan solusi untuk bilah putih di sini :

Ditetapkan viewport-fit=coverpada <meta>tag viewport , yaitu:

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

Bilah putih di UIWebView kemudian menghilang:

Solusi untuk menghapus area hitam (disediakan oleh @dpogue dalam komentar di bawah) adalah dengan menggunakan gambar LaunchStoryboard dengan cordova-plugin-splashscreenuntuk menggantikan gambar peluncuran lama, yang digunakan oleh Cordova secara default. Untuk melakukannya, tambahkan yang berikut ini ke platform iOS di 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>

Kemudian buat gambar dengan dimensi berikut di res/screen/ios(hapus yang sudah ada):

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

Setelah bilah hitam dihapus, ada hal lain yang berbeda tentang iPhone X yang harus diatasi: Bilah status lebih besar dari 20 piksel karena "takik", yang berarti konten apa pun di bagian paling atas dari aplikasi Cordova Anda akan dikaburkan olehnya :

Daripada melakukan hard-coding padding dalam piksel, Anda dapat menangani ini secara otomatis di CSS menggunakan safe-area-inset-*konstanta baru di iOS 11.

Catatan: di iOS 11.0 fungsi untuk menangani konstanta ini dipanggil constant()tetapi di iOS 11.2 Apple menamainya env()( lihat di sini ), oleh karena itu untuk mencakup kedua kasus Anda perlu membebani aturan CSS dengan keduanya dan bergantung pada mekanisme fallback CSS untuk menerapkan yang sesuai:

body{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

Hasilnya kemudian seperti yang diinginkan: konten aplikasi menutupi layar penuh, tetapi tidak dikaburkan oleh "takik":

Saya telah membuat proyek uji Cordova yang menggambarkan langkah-langkah di atas: webview-test.zip

Catatan:

Tombol footer

  • Jika aplikasi Anda memiliki tombol footer (seperti milik saya), Anda juga perlu menerapkannya safe-area-inset-bottomagar tidak tumpang tindih dengan tombol Home virtual di iPhone X.
  • Dalam kasus saya, saya tidak dapat menerapkan ini <body>karena footer benar-benar diposisikan, jadi saya perlu menerapkannya langsung ke footer:

.toolbar-footer{
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

cordova-plugin-statusbar

  • Ukuran bilah status telah berubah di iPhone X, jadi versi lama cordova-plugin-statusbartampilan salah di iPhone X.
  • Mike Hartington telah membuat permintaan tarik ini yang menerapkan perubahan yang diperlukan.
  • Ini digabungkan ke dalam cordova-plugin-statusbar@2.3.0rilis, jadi pastikan Anda menggunakan setidaknya versi ini untuk diterapkan ke safe-area-insets

splashscreen

  • Batasan storyboard LaunchScreen berubah pada iOS 11 / iPhone X, yang berarti splashscreen tampak "melompat" saat diluncurkan ketika menggunakan versi plugin yang ada ( lihat di sini ).
  • Ini ditangkap dalam laporan bug CB-13505 , memperbaiki PR cordova-ios # 354 dan dirilis cordova-ios@4.5.4, jadi pastikan Anda menggunakan versi cordova-iosplatform terbaru.

orientasi perangkat

  • Saat menggunakan UIWebView di iOS 11.0, memutar dari potret> lanskap> potret menyebabkan safe-area-insettidak diterapkan kembali, menyebabkan konten dikaburkan oleh takik lagi (seperti yang disorot oleh jms dalam komentar di bawah).
  • Juga terjadi jika aplikasi diluncurkan dalam lanskap lalu diputar ke potret
  • Ini tidak terjadi saat menggunakan WKWebView melalui cordova-plugin-wkwebview-engine.
  • Laporan radar: http://www.openradar.me/radar?id=5035192880201728
  • Pembaruan : ini tampaknya telah diperbaiki di iOS 11.1

Sebagai referensi, ini adalah masalah Cordova asli yang saya buka yang menangkap ini: https://issues.apache.org/jira/browse/CB-13273

— DaveAlden
sumber
3
Apakah Anda mengalami masalah saat memutar layar? Saya sudah mencoba, tetapi setelah layar putar, semuanya rusak (safe-area-inset- * tidak memperbarui nilainya tergantung orientasi perangkat; dan setelah putar potret -> lanskap -> potret lagi, nilai awal juga rusak ). Mungkinkah ada masalah dengan browser apple / safari?
— Juan Miguel S.
1
Dalam kasus saya, ketika saya menambahkan viewport-fit=coverseluruh aplikasi saya hanya menampilkan layar putih kosong dan tidak ada yang lain. Saya menggunakan iOS11, Xcode9 di iPhone 7 Plus. Adakah yang mengalami perilaku serupa?
— Dimitri
1
@DaveAlden - tampak bahwa dalam 11.2 beta + mereka telah menjatuhkan constantuntuk envkata kunci - lihat juga: webkit.org/blog/7929/designing-websites-for-iphone-x
— Brent
1
di mana Anda meletakkan kode css tubuh di Aplikasi Anda? Seperti di file yang mana? Tidak ada yang berhasil untuk saya, saya menggunakan Ionic 3.
— Dimitri
2
Apakah ada pembaruan terkait masalah rotasi? Saya menggunakan iOS 12 dan mengalami masalah yang sama. Tampak aneh bagi saya bahwa masalah ini terus berlanjut. / cc @jms
— a - m
36

Untuk perbaikan manual pada proyek cordova yang ada

Batang hitam

Tambahkan ini ke file info.plist Anda . Memperbaiki gambar peluncuran adalah masalah terpisah yaitu Cara Menambahkan Gambar Peluncuran iPhoneX

<key>UILaunchStoryboardName</key>
<string>CDVLaunchScreen</string>

Batang putih

Set viewport-fit = cover di meta tag

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">
— pembuat kode
sumber
Terima kasih! Perubahan .plist memiliki efek yang sama seperti perubahan dari jawaban yang dipilih, tetapi JAUH lebih cepat.
— 2Fwebd
Apa yang dilakukan masing-masing tugas ini pada tinggi dan lebar piksel CSS? Aplikasi saya memiliki serangkaian div sempit di bagian atas (menu, dll) ... dan kemudian saya menghitung tinggi piksel yang tersisa agar DIV terakhir mengisi sisa layar. Saat ini saya dapat melihat bilah putih bagian bawah menutupi sebagian dari DIV itu, tetapi saya juga dapat mengetahui tidak semuanya - menyiratkan bahwa DIV masih tidak akan sampai ke bagian bawah layar. Dan pada gilirannya, aplikasi saya dimulai di bawah bilah putih atas sehingga bahkan tidak mencoba menggunakan ruang atas.
— rolinger
Saya menggunakan UILaunchStoryboardNamedan berhasil menghilangkan bilah hitam. Tapi layar splash saya melebar. Ada alasan kenapa? Jawaban yang diterima tidak berhasil untuk saya
— Huiting
@coder Terima kasih - tetapi menambahkan UILaunchStoryboardName ke plist menghentikan saya untuk dapat mengirimkan ke toko aplikasi: ERROR ITMS-90705: "Luncurkan storyboard tidak ditemukan. Pastikan Anda menentukan nama file storyboard peluncuran tanpa ekstensi nama file untuk kunci UILaunchStoryboardName di Info.plist. "
— Matt Roberts
@Huiting, apakah Anda menemukan solusi tentang kasus Anda?
— LMaker
16

Ada 3 langkah yang harus Anda lakukan

untuk bilah status iOs 11 & masalah header iPhone X.

1. Sarung penutup area pandang

Tambahkan viewport-fit=coverke meta viewport Anda di<header>

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

Demo: https://jsfiddle.net/gq5pt509 (index.html)

  1. Tambahkan lebih banyak gambar percikan ke config.xmldalam Anda<platform name="ios">

Jangan lewati langkah ini , ini diperlukan untuk mendapatkan kesesuaian layar untuk kerja iPhone X.

<splash src="your_path/Default@2x~ipad~anyany.png" />   <!-- 2732x2732 -->
<splash src="your_path/Default@2x~ipad~comany.png" />   <!-- 1278x2732 -->
<splash src="your_path/Default@2x~iphone~anyany.png" /> <!-- 1334x1334 -->
<splash src="your_path/Default@2x~iphone~comany.png" /> <!-- 750x1334  -->
<splash src="your_path/Default@2x~iphone~comcom.png" /> <!-- 1334x750  -->
<splash src="your_path/Default@3x~iphone~anyany.png" /> <!-- 2208x2208 -->
<splash src="your_path/Default@3x~iphone~anycom.png" /> <!-- 2208x1242 -->
<splash src="your_path/Default@3x~iphone~comany.png" /> <!-- 1242x2208 -->

Demo: https://jsfiddle.net/mmy885q4 (config.xml)

  1. Perbaiki gaya Anda di CSS

Gunakan safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, atausafe-area-inset-bottom

Contoh: (Gunakan dalam kasus Anda!)

#header {
   position: fixed;
   top: 1.25rem; // iOs 10 or lower
   top: constant(safe-area-inset-top); // iOs 11
   top: env(safe-area-inset-top); // iOs 11+ (feature)

   // or use calc()
   top: calc(constant(safe-area-inset-top) + 1rem);
   top: env(constant(safe-area-inset-top) + 1rem);
  
   // or SCSS calc()
   $nav-height: 1.25rem;
   top: calc(constant(safe-area-inset-top) + #{$nav-height});
   top: calc(env(safe-area-inset-top) + #{$nav-height});
}

Bonus: Anda dapat menambahkan kelas tubuh seperti is-androidatau is-iospada perangkat

var platformId = window.cordova.platformId;
if (platformId) {
   document.body.classList.add('is-' + platformId);
}

Jadi Anda bisa melakukan sesuatu seperti ini di CSS

.is-ios #header {
 // Properties
}
— l2aelba
sumber
5

Dalam kasus saya di mana setiap layar splash dirancang secara individual alih-alih dibuat secara otomatis atau ditata dalam format papan cerita, saya harus tetap menggunakan konfigurasi layar Legacy Launch saya dan menambahkan gambar potret dan lanskap untuk menargetkan orientasi iPhoneX 1125 × 2436 ke config.xml seperti ini:

<splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
<splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />

Setelah menambahkan ini ke config.xml ("viewport-fit = cover" sudah disetel di index.hml) aplikasi saya yang dibuat dengan Ionic Pro mengisi seluruh layar pada perangkat iPhoneX.

— TaeKwonJoe
sumber
Pak, tetapi di config.xml saya, saya sudah menambahkan di atas baris ini dan viewport-fit = cover
— Kapil soni
@Kapilsoni maka mungkin ada masalah dengan plugin Cordova UIWebView, WKWebView, SplashScreen, atau kombinasi dari konfigurasi ini. Selain itu, apakah Anda menargetkan XCode 10 atau 11 di build Anda?
— TaeKwonJoe
Pak, saya menargetkan Xcode 10?
— Kapil soni
2

Perbaikan untuk masalah rotasi layar iPhone X / XS

Di iPhone X / XS, rotasi layar akan menyebabkan tinggi bilah header menggunakan nilai yang salah, karena penghitungan safe-area-inset- * tidak mencerminkan nilai baru pada waktunya untuk penyegaran UI. Bug ini ada di UIWebView bahkan di iOS terbaru 12. Solusinya adalah memasukkan margin atas 1px dan kemudian dengan cepat membalikkannya, yang akan memicu safe-area-inset- * untuk segera dihitung ulang. Perbaikan yang agak jelek tetapi berfungsi jika Anda harus tetap menggunakan UIWebView karena satu dan lain alasan.

window.addEventListener("orientationchange", function() {
    var originalMarginTop = document.body.style.marginTop;
    document.body.style.marginTop = "1px";
    setTimeout(function () {
        document.body.style.marginTop = originalMarginTop;
    }, 100);
}, false);
Luaskan cuplikan

Tujuan dari kode ini adalah untuk mengubah document.body.style.marginTop sedikit, lalu membalikkannya. Tidak harus "1px". Anda dapat memilih nilai yang tidak menyebabkan UI Anda berkedip tetapi mencapai tujuannya.

— YYL
sumber
UIWebView dihilangkan di iOS8 ... Saya ragu apakah ada bug yang akan diperbaiki. Apple memperingatkan ketika mengunggah aplikasi bahwa ini akan segera dihentikan ... jadi waktu untuk mengambil rasa sakit dan bermigrasi ke WKWebView ...
— Mozfet
2

Saya mengembangkan aplikasi cordova selama 2 tahun dan saya menghabiskan waktu berminggu-minggu untuk memecahkan masalah terkait (misalnya: gulungan tampilan web saat keyboard terbuka). Berikut adalah solusi yang teruji dan terbukti untuk iOS dan Android

PS: Saya menggunakan iScroll untuk menggulir konten

  1. Jangan pernah menggunakan viewport-fit = cover di tag meta index.html, biarkan aplikasi tetap berada di luar bilah status. iOS akan menangani area yang sesuai untuk semua varian iPhone.
  2. Di XCode hapus centang sembunyikan bilah status dan membutuhkan layar penuh dan jangan lupa untuk memilih Luncurkan File Layar sebagai CDVLaunchScreen
  3. Dalam config.xml setel layar penuh sebagai salah
  4. Akhirnya, (terima kasih kepada Eddy Verbruggen untuk plugin yang hebat) tambahkan pluginnya cordova-plugin-webviewcolor untuk mengatur statusbar dan warna latar belakang area bawah. Plugin ini memungkinkan Anda untuk mengatur warna apa pun yang Anda inginkan.

  5. Tambahkan di bawah ke config.xml (ff pertama setelah x adalah opacity)

    <preference name="BackgroundColor" value="0xff088c90" />

  6. Tangani posisi gulir Anda sendiri dengan menambahkan peristiwa fokus ke elemen masukan

    iscrollObj.scrollToElement(elm, transitionduration ... etc)

Untuk android, lakukan hal yang sama tetapi sebagai ganti cordova-plugin-webviewcolor , instal cordova-plugin-statusbar dan cordova-plugin-navigationbar-color

Berikut kode javascript yang menggunakan plugin tersebut untuk bekerja di ios dan android:

function setStatusColor(colorCode) {
    //colorCode is smtg like '#427309';
    if (cordova.platformId == 'android') {
        StatusBar.backgroundColorByHexString(colorCode);
        NavigationBar.backgroundColorByHexString(colorCode);
    } else if (cordova.platformId == 'ios') {
        window.plugins.webviewcolor.change(colorCode);
    }
}
— gdarcan.dll
sumber
1

Jika Anda menginstal versi yang lebih baru ionicsecara global, Anda dapat menjalankan ionic cordova resourcesdan itu akan menghasilkan semua gambar splashscreen untuk Anda bersama dengan ukuran yang benar.

— nebulr
sumber
-1

Harap dicatat bahwa artikel ini: https://medium.com/the-web-tub/supporting-iphone-x-for-mobile-web-cordova-app-using-onsen-ui-f17a4c272fcd memiliki ukuran yang berbeda dari di atas dan cordova halaman plugin:

Default@2x~iphone~anyany.png (= 1334x1334 = 667x667@2x)
Default@2x~iphone~comany.png (= 750x1334 = 375x667@2x)
Default@2x~iphone~comcom.png (= 750x750 = 375x375@2x)
Default@3x~iphone~anyany.png (= 2436x2436 = 812x812@3x)
Default@3x~iphone~anycom.png (= 2436x1242 = 812x414@3x)
Default@3x~iphone~comany.png (= 1242x2436 = 414x812@3x)
Default@2x~ipad~anyany.png (= 2732x2732 = 1366x1366@2x)
Default@2x~ipad~comany.png (= 1278x2732 = 639x1366@2x)

Saya mengubah ukuran gambar seperti di atas dan memperbarui iosplatform dan cordova-plugin-splashscreenke yang terbaru dan flash ke layar putih setelah masalah kedua diperbaiki. Namun gambar percikan awal memiliki batas putih di bagian bawah sekarang.

— msmfsd.dll
sumber
1
Saya dapat mengonfirmasi iPhone X pada peluncuran simulator dengan Default@3x~iphone~comany.png - 1242x2436gambar
— msmfsd
Dari catatan, dimensi yang tepat untuk iPhone X adalah sebagai berikut ... Potret: 1125px × 2436px ... Lanskap: 2436px × 1125px
— Sterling Bourne
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.