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-engine
sehingga 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-engine
yang 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:
<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?Jawaban:
Saya menemukan solusi untuk bilah putih di sini :
Ditetapkan
viewport-fit=cover
pada<meta>
tag viewport , yaitu: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-splashscreen
untuk menggantikan gambar peluncuran lama, yang digunakan oleh Cordova secara default. Untuk melakukannya, tambahkan yang berikut ini ke platform iOS diconfig.xml
:Kemudian buat gambar dengan dimensi berikut di
res/screen/ios
(hapus yang sudah ada):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 menamainyaenv()
( 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: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
safe-area-inset-bottom
agar tidak tumpang tindih dengan tombol Home virtual di iPhone X.<body>
karena footer benar-benar diposisikan, jadi saya perlu menerapkannya langsung ke footer:cordova-plugin-statusbar
cordova-plugin-statusbar
tampilan salah di iPhone X.[email protected]
rilis, jadi pastikan Anda menggunakan setidaknya versi ini untuk diterapkan ke safe-area-insetssplashscreen
[email protected]
, jadi pastikan Anda menggunakan versicordova-ios
platform terbaru.orientasi perangkat
safe-area-inset
tidak diterapkan kembali, menyebabkan konten dikaburkan oleh takik lagi (seperti yang disorot oleh jms dalam komentar di bawah).cordova-plugin-wkwebview-engine
.Sebagai referensi, ini adalah masalah Cordova asli yang saya buka yang menangkap ini: https://issues.apache.org/jira/browse/CB-13273
sumber
viewport-fit=cover
seluruh 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?constant
untukenv
kata kunci - lihat juga: webkit.org/blog/7929/designing-websites-for-iphone-xUntuk 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
Batang putih
Set viewport-fit = cover di meta tag
sumber
UILaunchStoryboardName
dan berhasil menghilangkan bilah hitam. Tapi layar splash saya melebar. Ada alasan kenapa? Jawaban yang diterima tidak berhasil untuk sayaAda 3 langkah yang harus Anda lakukan
untuk bilah status iOs 11 & masalah header iPhone X.
1. Sarung penutup area pandang
Tambahkan
viewport-fit=cover
ke meta viewport Anda di<header>
Demo: https://jsfiddle.net/gq5pt509 (index.html)
config.xml
dalam Anda<platform name="ios">
Jangan lewati langkah ini , ini diperlukan untuk mendapatkan kesesuaian layar untuk kerja iPhone X.
Demo: https://jsfiddle.net/mmy885q4 (config.xml)
Gunakan
safe-area-inset-left
,safe-area-inset-right
,safe-area-inset-top
, atausafe-area-inset-bottom
Contoh: (Gunakan dalam kasus Anda!)
Bonus: Anda dapat menambahkan kelas tubuh seperti
is-android
atauis-ios
pada perangkatJadi Anda bisa melakukan sesuatu seperti ini di CSS
sumber
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:
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.
sumber
Sekadar catatan bahwa penggunaan
constant
kata kunci untuk margin area aman telah diperbarui menjadienv
untuk 11,2 beta +https://webkit.org/blog/7929/designing-websites-for-iphone-x/
sumber
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.
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.
sumber
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
Tambahkan di bawah ke config.xml (ff pertama setelah x adalah opacity)
Tangani posisi gulir Anda sendiri dengan menambahkan peristiwa fokus ke elemen masukan
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:
sumber
Jika Anda menginstal versi yang lebih baru
ionic
secara global, Anda dapat menjalankanionic cordova resources
dan itu akan menghasilkan semua gambar splashscreen untuk Anda bersama dengan ukuran yang benar.sumber
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:
Saya mengubah ukuran gambar seperti di atas dan memperbarui
ios
platform dancordova-plugin-splashscreen
ke yang terbaru dan flash ke layar putih setelah masalah kedua diperbaiki. Namun gambar percikan awal memiliki batas putih di bagian bawah sekarang.sumber
Default@3x~iphone~comany.png - 1242x2436
gambar