Mari kita lihat dulu seperti apa model iPhone X
Pada gambar di atas, model Iphonex memiliki dua area baru di bagian kepala dan bawah, jadi kita perlu melakukan beberapa adaptasi untuk model jenis ini untuk memudahkan tampilan webapp kita.
Untuk halaman seluler yang terbuat dari h5, tata letak yang umum adalah kepala + batang tubuh + mode tiga kolom bawah. Kepala dan atas diposisikan secara tetap, dan konten di batang tubuh dapat digulir. Tata letak tentatifnya adalah sebagai berikut:
<div class=page> <header></header> <main></main> <footer></footer> </div>
Namun, jika Anda tidak menggunakan atribut css baru pada Iphone. Dalam situasi ini, bilah navigasi di bagian bawah terhalang oleh lampu pernapasan yang disertakan dengan Iphone. Periksa beberapa solusi
Saya menggunakan kerangka vue. Di halaman index.html, kita perlu menambahkan
<nama meta=konten viewport=lebar=lebar perangkat,viewport-fit=cover>
Kemudian pada halaman public app.vue, tampilan masing-masing komponen kita diganti dengan router-view di sini, sehingga public header bar dapat diproses di sini.
<template><div id=app><div class=placeholder_top :style={position:fixpositiona?'absolute':'fixed'}></div><router-view class=routerview></router-view>< /div></template>Pada tata letak di atas, kita menulis yang berikut untuk div dengan kelas placeholder_top:
.placeholder_top { posisi: tetap; atas: 0; kiri: 0; lebar: 10rem; warna latar: #303030; tinggi: konstan(area-inset-top ); indeks-z: 999;}Dalam hal ini, kita tidak lagi harus berurusan dengan masalah bilah atas untuk masing-masing komponen di masa mendatang. Selanjutnya, kita dapat menangani masalah header yang disebutkan sebelumnya. Umumnya, sebagian besar header akan dienkapsulasi menjadi komponen publik, jadi masuk Disini karena pengaruh elemen yang kita sisipkan pada halaman app.vue, maka cara penulisan CSS pada head kita juga perlu sedikit diubah. Tata letak halaman komponen head adalah sebagai berikut:
<template><header> <div class=title :style={position:fixposition?'absolute':'fixed'}> Konten navigasi</div> <div class=placeholder></div> </header></ templat>Css halamannya adalah:
header{warna latar: #303030; .title{ posisi: tetap; atas:0; atas: konstan(area-inset-top); atas: env(area-inset-top); tinggi: 88 piksel; indeks-z: 999; } .placeholder{ tinggi: 88 piksel; lebar: 10rem }}Ditulis dengan cara ini, bilah navigasi kepala akan ditempatkan di bawah bilah status ponsel, tidak akan memengaruhi jendela, dan kompatibel dengan model Android dan iOS (masalah kompatibilitas tersebut juga melibatkan masalah sistem iOS, tetapi artikel ini Belum terlibat)
Sekarang mari kita lihat pengolahan area utama. Karena komponen header di atas sudah diproses, maka layout utamanya adalah sebagai berikut:
main {padding-top: konstan(safe-area-inset-top);padding-top: env(safe-area-inset-top);padding-bottom: calc(88px + konstanta(safe-area-inset-bottom) );padding-bottom: calc(88px + env(safe-area-inset-bottom));ps: Izinkan saya menjelaskannya di sini. Dua baris berikut digunakan ketika halaman saat ini tidak memiliki bilah navigasi bawah.
padding-bottom: konstan(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);},
Tata letak utama sudah siap, tinggal tulis kontennya langsung.
Kemudian lihat tata letak footer di bagian bawah
<template><footer> <div class=foot :style={position:fixposition?'absolute':'fixed'}> Konten terbawah</div></footer></template>Css konten bawahnya adalah sebagai berikut:
footer{ posisi: tetap; bawah: 0; kiri: 0; lebar: 10rem; tinggi: kalk(88px + konstanta(area-inset-aman) tinggi: kalk(88px + env(inset-area-aman- bawah)); warna latar: #303030; .kaki{ posisi: absolut; atas:0; kiri: 0; 88 piksel; }}Ditulis dengan cara ini, konten di kaki navigasi bawah tidak akan terhalang oleh lampu pernapasan yang disertakan dengan ponsel.
Jadi bisa kita simpulkan bahwa metode penulisan css yang mungkin perlu kita gunakan dalam adaptasi webapp semacam ini adalah sebagai berikut:
posisi: tetap; atas: konstan(area-inset-atas); atas: env(area-inset-atas); bawah: konstan(area-inset-bawah); -inset-bottom); atas: kalk(1rem + konstanta(area-inset-top)); atas: kalk(1rem + env(area-inset-top) bawah: calc(1rem + konstan(safe-area-inset-bottom)); calc(1rem + env(safe-area-inset-bottom));
ps: Pada tulisan di atas tertulis: style={position:fixposition?'absolute':'fixed'}. Hal ini untuk mengatasi masalah penempatan elemen tetap yang tidak akurat ketika pengguna mengklik kotak input dan keyboard lunak muncul. Jika Anda tertarik, Anda dapat mempelajarinya untuk saat ini.
Metode penulisan yang berbeda dapat digunakan di sini sesuai dengan kebutuhan aktual. Disarankan untuk tidak terlalu menyimpang dari logika tata letak umum. Ini ditulis dengan cara ini untuk pemrosesan terpadu dan pemeliharaan yang mudah karena kompatibilitas tata letak ditemukan, debugging mesin nyata dapat digunakan Metodenya adalah dengan menggunakan browser PC untuk men-debug aplikasi web dan meninjau elemen. Ini pada dasarnya dapat menyelesaikan sebagian besar masalah gaya. Mengenai debugging mesin nyata, saya akan menulis tentang itu lain kali.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.