Implementasi sederhana dari Html5 yang beradaptasi dengan layar takik iPhoneX

Layar takik iPhone Jika dipasang di bagian atas, jika Anda menggeser halaman ke atas atau ke bawah, akan ada celah yang besar. Tidak apa-apa jika latar belakangnya putih semua, jika tidak maka akan terlihat rusak, yang sangat jelek .

ukuran layar iPhone

Perbedaan ukuran antara iPhoneX dan model lainnya

Alasan dari masalah di atas adalah iPhoneX memiliki area aman mengacu pada rentang jendela visual yang tidak terpengaruh oleh sudut, rumah sensor, dan indikator rumah, area biru pada gambar di bawah :

Dengan kata lain, jika kita ingin beradaptasi dengan baik, kita harus memastikan bahwa area halaman yang terlihat dan dapat dioperasikan berada dalam area aman.

Untuk dimensi spesifik, silakan lihat Pedoman Antarmuka Manusia – iPhoneX

Langkah pertama adalah mengatur tata letak halaman web di jendela visual

 <nama meta=konten viewport=lebar=lebar perangkat, viewport-fit=cover>

Fitur baru iOS11. Untuk beradaptasi dengan iPhoneX, Apple telah memperluas tag meta viewport yang ada untuk mengatur tata letak halaman web di jendela visual.

• berisi: Jendela visual berisi konten halaman web secara lengkap (gambar kiri)
• sampul: Konten halaman web menutupi seluruh jendela visual (gambar kanan)
• otomatis: nilai default, konsisten dengan isi

Catatan: Halaman web yang tidak menambahkan ekstensi secara default adalah viewport-fit=contain. Jika perlu diadaptasi ke iPhoneX, viewport-fit=cover harus disetel.

Untuk detailnya, lihat: Deskriptor viewport-fit

Pada langkah kedua, konten utama halaman dibatasi pada area aman.

 .posting { padding: 12px; padding-kiri: env(area-inset-kiri); padding-kiri: const(area-inset-kiri); ); padding-kanan: const(area-inset-kanan);}

Fitur baru iOS11, fungsi CSS Webkit, digunakan untuk mengatur jarak antara area aman dan batas. Ada empat variabel yang telah ditentukan sebelumnya:

• safe-area-inset-left : Jarak antara area aman dan batas kiri
• safe-area-inset-right : jarak dari area aman ke batas kanan
• safe-area-inset-top : jarak dari area aman ke batas atas
• safe-area-inset-bottom : jarak dari area aman ke batas bawah

Catatan: Beberapa browser tidak lagi mendukung fungsi konstanta dan menggunakan fungsi env sebagai gantinya.

Secara default, jika klien menangani zona keamanan, efeknya adalah sebagai berikut:

Setelah menggunakan atribut viewport-fit=cover layar penuh:

Peta area aman:

Rendering setelah membatasi area aman:

Padding diatur ke 12 piksel di atas. Jika arahnya diputar:

Langkah ketiga adalah menggunakan metode min() dan max()

 @supports(padding: max(0px)) { .post { padding-kiri: max(12px, env(safe-area-inset-left)); padding-kanan: max(12px, env(safe-area-inset-kiri)); Kanan)); }} 

Memperbaiki masalah elemen tetap

Jika judul halaman diterapkan di ujung depan dan ditetapkan di bagian atas, maka akan diblokir. Saat ini, Anda dapat mengatur nilai teratas ke nilai jarak aman, misalnya:

 .header{top:env(area-inset-top);top:const(area-inset-top);}

Artikel referensi: Mendesain Situs Web untuk iPhone X

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.