ukuran layar
Rangkuman dimensi perkembangan seri iPhone yang selama ini kita kenal adalah sebagai berikut:
△Ukuran pengembangan setiap model iPhoneKonversikan ke ukuran piksel yang terkenal:
△ Dimensi multidimensi setiap modelPeta perbesaran sebenarnya adalah hubungan perbesaran antara ukuran piksel dan ukuran pengembangan, tetapi ini hanya manifestasi eksternal. Faktor inti yang mempengaruhi pembesaran adalah PPI (DPI). Memahami hubungan antara kepadatan layar dan berbagai ukuran akan membantu kita memahami secara mendalam konsep pembesaran: "Pelajari dasar-dasarnya! Panduan DPI yang Disesuaikan untuk Desainer》
Dalam peningkatan ini, ukuran layar dan resolusi iPhone8 mewarisi tradisi bagus iPhone6 dan versi lebih baru;
Namun, iPhone X telah mengalami perubahan besar dalam hal ukuran layar, resolusi, dan bahkan bentuk. Mari kita ambil iPhone 8 sebagai referensi untuk melihat bagaimana kita harus mempertimbangkan adaptasi iPhone X.
Mari kita lihat perubahan ukuran iPhone X:
2. Adaptasi iPhoneX---area aman (area aman)Pendapat Apple mengenai tata letak desain iPhone X adalah sebagai berikut:
Konten inti harus berada di area Aman untuk memastikan bahwa konten tersebut tidak tertutup oleh sudut membulat (sudut), rumah sensor (rumah sensor, poni penuh) dan Indikator Rumah di bagian bawah. Dengan kata lain, konten yang kami desain untuk ditampilkan harus sebisa mungkin berada dalam area aman;
3. Adaptasi iPhoneX --- Skema adaptasi viewport-fit 3.1 Adaptasi PhoneX, tag meta viewport-fit digunakan sebagai skema adaptasi di iOS 11; nilai default viewport-fit adalah otomatis.Nilai viewport-fit adalah sebagai berikut:
| mobil | Default: viewprot-fit:contain; konten halaman ditampilkan di area aman |
| menutupi | viewport-fit:cover, konten halaman memenuhi layar |
pengaturan tag meta viewport-fit (saat menutupi)
<meta name=viewport content=width=device-width,initial-scale=1.0, minimum-scale=1.0, maksimum-scale=1.0, user-scalable=no, viewport-fit=cover>
3.2 Pengenalan fungsi css Constant() dan safe-area-inset-top &safe-area-inset-left &safe-area-inset-right &safe-area-inset-bottom
Seperti yang ditunjukkan di atas, WebKit di iOS 11 menyertakan fungsi CSS baru Constant(), dan satu set empat konstanta yang telah ditentukan sebelumnya: safe-area-inset-left, safe-area-inset-right, safe-area -inset-top, dan safe-area-inset-top. -area-inset-bawah. Jika digabungkan bersama-sama, memungkinkan gaya untuk mereferensikan ukuran area aman setiap aspek.
3.1 Ketika kita mengatur viewport-fit:contain, yang merupakan waktu default; mengatur safe-area-inset-left, safe-area-inset-right, safe-area-inset-top dan safe-area-inset-bottom, dll. . Parameter tidak berpengaruh.
3.2 Saat kita menyetel viewport-fit:cover: pengaturannya adalah sebagai berikut
body { padding-top: Constant(safe-area-inset-top); //Ketinggian bilah navigasi + bilah status adalah 88px padding-left: konstan(safe-area-inset-left); tidak vertikal Apakah 0 padding-right: konstan (safe-area-inset-right); //Jika layar tidak vertikal, maka 0 padding-bottom: Constant(safe-area-inset-bottom);//Tinggi busur bawah adalah 34px } 4. Adaptasi iPhoneX --- statistik tinggi badanviewport-fit: penutup + bilah navigasi
5. Adaptasi iPhoneX --- permintaan mediaPerhatikan bahwa 690px (tinggi area aman) digunakan di sini, bukan 812px;
@media hanya layar dan (lebar: 375px) dan (tinggi: 690px){ body { latar belakang: biru }} 6.iphoneX viewport-sesuai Ringkasan masalah1. Saat halaman iphoneX menggunakan warna gradien; jika viewport-fit:cover;
1.1 Perbedaan antara satu warna dan warna gradien diatur saat warna latar belakang disetel. Jika warnanya tunggal, warna tersebut akan memenuhi seluruh layar. Jika warna gradien disetel, warna tersebut hanya akan ditampilkan pada ketinggian elemen anak; dan tinggi halaman hanya 690px. Gunakan padding-top:88px di atas;
Tubuh terpaku pada:
<body><div class=content>ini adalah subElemen</div></body>
1. Saat monokrom:
* { padding: 0; margin: 0; } body { latar belakang:hijau; padding-top: konstan(area-inset-top); );*/ /*padding-kanan: konstan(safe-area-inset-right);*/ /*padding-bottom: konstan(safe-area-inset-bottom);*/ }2. Warna gradien
* { padding: 0; margin: 0; } body { latar belakang:-webkit-gradient(linear, 0 0, 0 bawah, dari(#ffd54f), ke(#ffaa22)); -inset-top); //88px /*padding-kiri: konstan(area-aman-inset-kiri);*/ /*padding-kanan: konstan(area-inset-kanan-aman);*/ /*padding-bawah: konstan(area-inset-bawah-aman);*/ }Cara mengatasi masalah penggunaan warna gradien agar tetap memenuhi seluruh layar, pengaturan CSS adalah sebagai berikut
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1, viewport-fit=cover> <title>Merancang Situs Web untuk iPhone X: Menghormati area aman</title> <style> * { padding: 0; margin: 0; } html, body { tinggi: 100%; } body { padding-atas: konstan (area-aman-inset-atas); konstan(area-inset-kiri); padding-kanan: konstan(area-inset-kanan); padding-bawah: konstan(area-inset-bawah); gradien(linier, 0 0, 0 bawah, dari(#ffd54f), ke(#ffaa22)); </style></head><body><div class=content>ini adalah subElemen</div></body></html>2. Elemen halaman menggunakan adaptasi posisi tetap: {position:fixed;}
2.1 Ketika halaman elemen anak diperbaiki di bagian bawah; saat menggunakan viewport-fit:contain; Anda dapat melihat bahwa ketika bottom:0 ditampilkan, itu hanya akan ditampilkan di area aman;
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1> <!--<meta name=viewport content=initial-scale=1, viewport-fit=cover>--> <title>Merancang Situs Web untuk iPhone X: Menghormati area aman</title> <style> * { padding: 0; margin: 0 } /*html,body {*/ /*height: 100%;*/ /*}*/ body { latar belakang: abu-abu; /*padding-atas: konstan(area-inset-top);*/ /*padding-kiri: konstan(area-inset-kiri );*/ /*padding-kanan: konstan(area-inset-kanan aman);*/ /*padding-bawah: konstan(area-inset-bawah aman);*/ } .top { lebar: 100%; tinggi: 44px; latar belakang: ungu; } .bottom { posisi: tetap; bawah: 0; kanan: 0; head><body> <div class=top>ini atas</div> <div class=bottom>ini bawah</div></body></html>2.1 Ketika halaman elemen anak diperbaiki di bagian bawah; saat menggunakan viewport-fit:cover; Anda dapat melihat bahwa bottom:0 hanya akan ditampilkan di area aman;
Tambahkan html,badan {lebar:100%;tinggi:100%}
Gambar 1:
* { padding: 0; margin: 0; } html,body { tinggi: 100%; } body { latar belakang: abu-abu; padding-atas: konstan (area-inset-atas); area-inset-kiri); padding-kanan: konstan(area-inset-kanan); padding-bawah: konstan(area-inset-bawah); lebar: 100%; tinggi: 44 piksel; latar belakang: ungu; } .bawah { posisi: tetap; latar belakang: hijau;Gambar 2:
* { padding: 0; margin: 0; } html,body { tinggi: 100%; } body { latar belakang: abu-abu; padding-atas: konstan (area-inset-atas); area-inset-kiri); padding-kanan: konstan(area-inset-kanan); /*padding-bawah: konstan(area-inset-bawah);*/ } .top { lebar: 100%; tinggi: 44px; latar belakang: ungu; } .bottom { posisi: tetap; latar belakang: hijau;2.3 Solusi untuk lapisan topeng pop-up alertView
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <!--<meta name=viewport content=width=device-width, initial-scale=1.0, minimum-scale=1.0 , skala maksimum=1.0, skalabel pengguna=tidak>--> <meta name=viewport konten=lebar=lebar perangkat, skala awal=1.0, skala minimum=1.0, skala maksimum=1.0, skala pengguna=tidak, viewport-fit=cover> <meta http-equiv=pragma content=no-cache > <meta http-equiv=cache-control content=no-cache> <meta http-equiv=expires content=0> <title>alertView</title> <skrip data-res=eebbk> document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px'; </script> <style> * { margin: 0; 100%; tinggi: 100%; } badan { ukuran font: 0,32rem; konstan(area-aman-inset-atas); bantalan-kiri: konstan(area-inset-kiri); bantalan-kanan: konstan(area-inset-kanan); -inset-bottom); } .content { perataan teks: tengah; } .testBut { margin: 50 piksel lebar: 100 piksel tinggi: 44 piksel; 1px abu-abu gelap solid; garis besar: tidak ada; pilihan pengguna: tidak ada; warna latar: kuning; class=content> <button class=testBut onclick=showLoading()>Pemuatan pop-up</button> </bagian> <script type=text/javascript src=alertView.js></script> <script> function showLoading() { UIAlertView.show({ type:input, title: Pengingat hangat, //Isi judul: Keanggotaan VIP akan segera berakhir, //Dapatkan isKnow baru: false }); var xx = UIAlertView() baru; console.log(xx); MeringkaskanDi atas adalah apa yang editor perkenalkan kepada Anda tentang adaptasi halaman HTML5 ke iPhoneX. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!