Tutorial tentang cara mengadaptasi iPhoneX ke halaman klien H5

Saat ini, banyak desainer APP mulai beralih ke pengembangan front-end H5, namun menyelesaikan masalah adaptasi untuk semua model iPhone dan Android adalah prioritas utama kami. Baik Anda mendesain APP atau menulis H5 front-end, Anda harus mempertimbangkan kompatibilitas seluler.

Sejak iPhone

1. Bilah atas

Klien sebelumnya selalu menggunakan metode 20pt untuk bilah status + 44pt untuk bilah navigasi. Sejak iPhone

2. Bilah operasi bawah

Sejak iPhone Saat ini, area aman kosong harus dibiarkan di bagian bawah, dan baris terbawah terakhir dari konten halaman harus berada di sudut ponsel. Ketinggian area aman ini adalah 34pt.

3. Metode adaptasi

Kesimpulannya, berdasarkan parameter unik ponsel iphoneX saat ini, metode adaptasi yang dapat kami terapkan adalah:

(1) tag meta

Untuk beradaptasi dengan iPhone

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

(2) Pertanyaan media

1. Gunakan fungsi konstan

Fungsi konstanta hanya dapat digunakan jika viewport-fit=cover diatur

 @supports(bottom:constant(safe-area-inset-bottom)) { selector{ padding-bottom:constant(safe-area-inset-bottom); padding-bottom:calc(30px(nilai asumsi) + konstanta(safe- area-inset-bottom)); //Pilih metode adaptasi sesuai dengan situasi aktual}}

2. Gunakan parameter model unik iphoneX

 @media saja layar dan (lebar perangkat: 375px) dan (tinggi perangkat:812px) dan (-webkit-device-pixel-ratio:3) { #buy { padding-bottom:34px }}

(3) penilaian js (Jquery digunakan di bawah)

 if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){ #beli { padding-bottom:34px }}

(4) Protokol klien

Anda juga dapat meminta klien untuk menanyakan apakah itu iPhoneX menurut protokol klien untuk menjaga konsistensi dengan klien.

4. Penjelasan parameter

Parameter pada kode di atas dijelaskan sebagai berikut:

• safe-area-inset-bottom — Fitur baru di ios11, digunakan untuk mengatur jarak antara area aman dan batas
• 375 — Lebar perangkat iphoneX
• 812 — Ketinggian perangkat iphoneX
• 3 — Resolusi perangkat iphoneX
• 724 — tinggi perangkat iphoneX (812) - tinggi bilah atas (88)
• 34 — Ketinggian zona aman bawah

Parameter di atas dihitung berdasarkan standar 1pt=1px. Jika halaman H5 mengadopsi metode penskalaan rem, maka 1pt = 1px * 3 (resolusi iPhoneX)

Di atas adalah keseluruhan isi artikel ini, saya berharap isi artikel ini memiliki nilai referensi tertentu untuk belajar atau bekerja semua orang. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk komunikasi Jaringan.