Mobile Development
1.0.0
Mengacu pada panjang diagonal layar, dalam inci. Ukuran umum meliputi: 3,5 inci, 4,0 inci, 5,0 inci, 5,5 inci, 6,0 inci, dll.
Catatan: 1 inci (inci) = 2,54 cm (cm)
Ini mengacu pada jumlah total titik piksel fisik pada layar di arah horizontal dan vertikal, yang umumnya diwakili oleh n * m. Misalnya: Resolusi layar iPhone6 adalah: 750 * 1334
| model | Resolusi (jumlah piksel fisik) |
|---|---|
| iPhone 3G/3GS | 320 * 480 |
| iphone 4 / 4s | 640 * 960 |
| iPhone 5/5s | 640 * 1136 |
| iPhone 6/7/8 | 750 * 1334 |
| iPhone 6p / 7p / 8p | 1242 * 2208 |
| iPhone X. | 1125 * 2436 |
| Hawei P30 | 1080 * 2340 |
| Hawei Mate40 | 2772 * 1344 |
| Xiaomi 10 | 2340 * 1080 |
| Xiaomi 11 | 3200 * 1440 |
Juga dikenal sebagai: kepadatan piksel layar, itu mengacu pada jumlah titik piksel fisik yang terkandung di setiap inci di layar. Unit ini adalah PPI (piksel per inci). Bahkan, ada unit lain DPI (titik per inci). Metode perhitungan kedua nilai tersebut sama, tetapi skenario penggunaannya berbeda. PPI terutama digunakan untuk mengukur layar, dan DPI terutama digunakan untuk mengukur printer, proyektor, dll.
Piksel fisik, juga dikenal sebagai piksel perangkat , adalah satuan panjang (PX). Pixel fisik adalah titik pencitraan fisik di layar, yang merupakan komponen fisik bercahaya kecil (yang dapat dengan mudah dipahami sebagai bola lampu super kecil), yang merupakan granularitas minimum yang dapat ditampilkan oleh layar. Jumlah fisik titik piksel (resolusi) layar adalah parameter penting dari layar ponsel dan ditentukan oleh produsen layar dan tidak dapat dimodifikasi setelah produksi . Misalnya, piksel fisik yang dimiliki iPhone6 dalam arah horizontal adalah 750, dan piksel fisik yang memiliki arah vertikal adalah 1334, yang diwakili oleh 750*1334.
CSS Pixel juga dikenal sebagai: Pixel Logis. Pixel CSS adalah unit abstrak dengan panjang, dan unit ini juga PX. Ini dibuat untuk pengembang web untuk secara akurat mengukur ukuran konten pada halaman web. Kami menggunakan piksel CSS secara tertulis CSS js kurang.
Piksel yang tidak tergantung pada perangkat disebut sebagai DIP atau DP (piksel-independen perangkat), juga dikenal sebagai: piksel kepadatan layar-independen.
PENDAHULUAN: Di era ketika [layar HD] tidak muncul, 1 piksel CSS sesuai dengan 1 piksel fisik, tetapi karena munculnya [layar HD], keduanya tidak lagi merupakan hubungan 1-ke-1. Pada 2010, Apple meluncurkan standar tampilan baru: Compress lebih banyak titik piksel fisik ke dalam layar sementara ukuran layar tetap tidak berubah , sehingga resolusi akan lebih tinggi dan efek tampilan akan lebih baik dan lebih halus. Apple memanggil layar ini: Layar retina (juga dikenal sebagai layar retina) , dan pada saat yang sama meluncurkan produk digital pembuatan zaman yang dilengkapi dengan layar ini - iPhone 4.
Programmer menulis: lebar = 2px, tinggi = 2px kotak. Jika piksel CSS secara langsung sesuai dengan 1 piksel fisik, karena ukuran layar iPhone3G/s dan iPhone4 sama dengan iPhone4, layar iPhone4 dapat mengakomodasi lebih banyak piksel fisik, sehingga piksel fisik iPhone4 jauh lebih kecil daripada iPhone3g/s. Secara teori, kotak ini akan jauh lebih kecil di layar iPhone4 daripada di layar iPhone3G/S. Faktanya adalah bahwa iPhone3G/S adalah ukuran yang sama dengan iPhone4! Lai Lai , tetapi iPhone 4 lebih halus dan jelas. Bagaimana cara melakukannya? Ini tergantung pada piksel independen perangkat. 
Munculnya piksel independen perangkat membuat elemen memiliki ukuran normal bahkan pada [layar HD]. S membuat kode tidak terpengaruh oleh perangkat. Ini diatur oleh produsen perangkat sesuai dengan karakteristik layar dan tidak dapat diubah.
Rasio piksel (DPR, rasio piksel perangkat): Rasio [piksel fisik] dan [piksel independen perangkat] dalam satu arah. Yaitu: DPR = piksel fisik/piksel independen perangkat
| model | Resolusi (jumlah piksel fisik) | Piksel independen perangkat (DIP atau DP) | Rasio Pixel (DPR) |
|---|---|---|---|
| iPhone 3G/3GS | 320 * 480 | 320 * 480 | 1 |
| iphone 4 / 4s | 640 * 960 | 320 * 480 | 2 |
| iPhone 5/5s | 640 * 1136 | 320 * 568 | 2 |
| iPhone 6/7/8 | 750 * 1334 | 375 * 667 | 2 |
| iPhone 6p / 7p / 8p | 1242 * 2208 | 414 * 736 | 3 |
| iPhone X. | 1125 * 2436 | 375 * 812 | 3 |
https://uiiiiii.com/screen/index.htm
Diagram bitmap dan vektor
Pixel gambar bit juga merupakan unit panjangnya. Pixel gambar bit dapat dipahami sebagai "kisi kecil" dalam bitmap, yang merupakan unit terkecil dari bitmap.
Saat ini, hanya logo yang perlu ditampilkan dalam definisi tinggi, atau logo format SVG yang dapat disediakan untuk menyelesaikan masalah. Jika tidak, permintaan media digunakan:
@media screen and ( -webkit-min-device-pixel-ratio : 2 ) {
. logo {
content : url (.. / imgs / logo@ 2 x.jpg)
}
}
@media screen and ( -webkit-min-device-pixel-ratio : 3 ) {
. logo {
content : url (.. / imgs / logo@ 3 x.jpg)
}
}Di sisi PC, lebar default viewport sama dengan lebar jendela browser. Dalam dokumen standar CSS, viewport juga disebut: awalnya mengandung blok, yang merupakan akar penyebab semua perhitungan lebar persentase CSS. Di sisi PC, lebar dapat diperoleh dengan cara berikut:
console . log ( '最干净的显示区域' , document . documentElement . clientWidth ) ; // 常用
console . log ( '最干净的显示区域+滚动条' , window . innerWidth ) ;
console . log ( '最干净的显示区域+滚动条+浏览器边框' , window . outerWidth ) ;
console . log ( '与浏览器无关，当前设备显示分辨率横向的值' , screen . width ) ; Pada perangkat seluler, produsen browser menghadapi masalah yang relatif besar: bagaimana mereka menghadirkan puluhan ribu, bahkan ratusan juta halaman web PC pada perangkat seluler secara lengkap tanpa bilah gulir horizontal? Maka kita perlu memperkenalkan tiga konsep terminal seluler: 1. Tata letak viewport, 2. Visual Viewport, 3. Viewport Ideal
Digunakan untuk memecahkan masalah tampilan halaman awal pada ponsel. Pada hari -hari awal, kami melakukan ini: lebar halaman web PC umumnya: 960px Kisaran 1024px, bahkan jika melebihi kisaran ini, 960px Area 1024px masih merupakan lokasi badan utama.
Produsen browser telah merancang wadah untuk perangkat seluler. Pertama, gunakan wadah ini untuk menahan halaman web di PC. Lebar wadah ini umumnya 980px . Perangkat yang berbeda mungkin berbeda, tetapi perbedaannya tidak besar. Kemudian, wadah dikompresi secara proporsional dengan lebar yang sama dengan ponsel, sehingga tidak ada bilah gulir dan halaman dapat sepenuhnya disajikan. Namun, masih ada masalah melakukan ini: konten halaman web dikompresi terlalu kecil, yang secara serius mempengaruhi pengalaman pengguna.
Cara mendapatkan tata letak viewports di terminal seluler: document.documentElement.clientWidth (biasanya 980px, iPad Pro adalah 1024px)
Catatan: Setelah tata letak viewport dikompresi, lebar horizontal tidak lagi 375px, tetapi 980px, karena tata letak viewport dikompresi, tidak dicegat.
Visual Viewport adalah area yang terlihat oleh pengguna. Lebar absolutnya selalu seluas layar perangkat, tetapi nilai piksel CSS yang terkandung dalam lebar ini bervariasi. Sebagai contoh: Secara umum, ponsel akan menempatkan 980 piksel CSS ke dalam visual viewport (visual viewport size = tata letak ukuran viewport) , sementara iPad Pro akan memasukkan 1024 piksel CSS ke dalam viewport visual.
Cara untuk mendapatkan visual viewport di terminal seluler: window.innerWidth , tetapi tidak dapat diperoleh dengan benar di Android 2, Opera Mini, dan UC8. (Secara umum, visual viewport tidak dilihat melalui kode)
Jika Anda menggunakan iPhone 6 sebagai contoh, jelaskan layar:
Viewport tata letak yang sama dengan lebar layar (DP/Dip) disebut viewport yang ideal, sehingga dapat juga dikatakan bahwa viewport yang ideal adalah standar: lebar tata letak viewport dan layar (DP/Dip) dicapai dengan tag meta.
Metode khusus untuk mengatur viewport yang ideal:
< meta name =" viewport " content =" width=device-width " >【Meringkaskan】:
1. Deskripsi Layar: piksel fisik: 750p ×, piksel independen perangkat: 375px, piksel CSS: 980px. 2. Keuntungan: Efek rendering elemen pada perangkat yang berbeda hampir sama, karena mereka diskalakan berdasarkan wadah tata letak, seperti 200 kotak lebar: 200/980 3. Kekurangan: Elemennya terlalu kecil, teks halaman tidak jelas, dan pengalaman pengguna tidak baik.
1. Deskripsi Layar: Pixel Fisik: 750px, Piksel Independen Perangkat: 375px, CSS Pixels: 375px. 2. Keuntungan: Halaman ini ditampilkan dengan jelas, kontennya tidak lagi sekecil yang sulit untuk diamati, dan pengalaman pengguna lebih baik. 3. Kerugian: Elemen yang sama memiliki efek rendering yang berbeda pada layar (perangkat) yang berbeda. Misalnya, kotak 375-lebar: 375/375 dan 375/414 (tampilan tidak setara dengan setara). 4. Cara menyelesaikannya: membuat adaptasi.
Saat memperbesar:
Kurangi ukurannya:
Proses Algoritma: Saat memperbesar, browser mencegat proporsi tertentu dari area ke dalam, dan kemudian segera mengisi gambar yang tersisa dengan proporsi yang sama untuk seluruh viewport, dan elemen -elemen yang tidak dapat diletakkan akan dibungkus secara otomatis.
Skrip Pemantauan:
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
// pc端， onresize监测的是视口的变化（初识包含块）
window . onresize = ( ) => {
console . log ( 'pc端视口为：' , document . documentElement . clientWidth )
} Saat memperbesar:
Catatan: Penskalaan seluler tidak akan mempengaruhi tata letak halaman, karena ukuran tata letak viewport tidak berubah selama penskalaan.
Tag meta-viewport diperkenalkan oleh Apple pada tahun 2007 untuk mengontrol viewport tata letak seluler, berusaha mengubah aturan industri 980 tata letak viewport. Opsi terkait viewport:
Nilai lebar dapat berupa nilai lebar perangkat atau spesifik, tetapi beberapa ponsel Android tidak mendukung nilai spesifik, dan dukungan seri iOS penuh
width=device-width, initial-scale=1.0 ditulis bersama.Skala maksimum diizinkan untuk penskalaan pengguna [Safari tidak mendukung] skala maksimum = Lebar layar (DIP Pixel Independent, DIP) / Lebar Viewport Visual
Skala maksimum yang memungkinkan pengguna untuk skala skala minimum = Lebar layar (Dip Independent Pixels, Dip) / Visual Viewport Width
Apakah akan mengizinkan pengguna untuk memperbesar halaman melalui jari mereka [safari tidak mendukung]
Pengaturan ke penutup dapat menyelesaikan masalah ruang putih di [layar takik]
< meta name =" viewport " content =" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover " >1. Mengapa Anda perlu beradaptasi? Karena ukuran layar yang berbeda dari perangkat seluler, akan ada: elemen yang sama akan menunjukkan efek yang berbeda pada dua ponsel yang berbeda (proporsi yang berbeda). Jika elemen yang sama ditampilkan pada perangkat yang berbeda, itu perlu diadaptasi. Tidak peduli metode adaptasi apa yang digunakan, prinsip pusat selalu: perbandingan yang sama!
Ada tiga metode adaptasi utama:
EM dan REM keduanya adalah unit panjang dalam CSS. Dan keduanya unit panjang relatif, tetapi keduanya sedikit berbeda
Di bawah viewport yang ideal, draft desain (DIP adalah 375px) digunakan sebagai standar dan root font adalah 100px untuk mencocokkan DIP perangkat lain.
Dalam viewport yang ideal, atur root font ke dip/10, yaitu band Bandingkan dengan 10 REM, mengingat berapa banyak elemen internal yang ditempati
1 VW = 1% dari tata letak lebar viewport 2 VH = 1% dari tata letak Tinggi viewport
Lihat Kompatibilitas: CANIUSE.com
1px di layar HD sesuai dengan lebih banyak piksel fisik (bola lampu kecil), sehingga batas 1 piksel terlihat lebih tebal. Solusinya adalah sebagai berikut:
@media screen and ( -webkit-min-device-pixel-ratio : 2 ){
# demo {
border : solid 0.5 px black;
}
}
@media screen and ( -webkit-min-device-pixel-ratio : 3 ){
# demo {
border : solid 0.333 px black;
}
}Daftar Acara Seluler
Acara di atas pertama kali muncul di iOS Safari untuk menyampaikan beberapa informasi khusus kepada pengembang
Melihat:
Setelah acara Touch selesai, acara klik elemen akan dipicu secara default. Jika viewport yang sempurna tidak ditetapkan, interval waktu untuk acara tersebut adalah sekitar 300 ms. Jika viewport sempurna diatur, interval waktu sekitar 30 ms (tergantung pada karakteristik perangkat tertentu).
Jika acara Touch menyebabkan elemen disembunyikan, tindakan klik akan bertindak pada elemen di belakangnya, memicu acara klik atau lompatan halaman dari elemen baru. Fenomena ini disebut penetrasi klik .
Blok perilaku default
btn . addEventListener ( 'touchend' , ( event ) => {
event . preventDefault ( )
shade . style . display = 'none'
} ) Buat elemen di belakang layar tidak memiliki karakteristik klik dan memodifikasinya menjadi tag div normal:
< div id =" baidu " >点我去百度</ div >Gunakan acara Touchend dan klik untuk melompat ke halaman web baru
baidu . addEventListener ( 'touchend' , ( ) => {
window . location . href = 'https://www.baidu.com'
} ) Gunakan atribut pointer-events di CSS untuk sementara kehilangan acara klik dan kembalikan setelah 300 milidetik:
# baidu {
display : block;
width : 100 % ;
height : 300 px ;
background-color : skyblue;
pointer-events : none;
} btn . addEventListener ( 'touchend' , ( ) => {
shade . style . display = 'none'
setTimeout ( ( ) => {
baidu . style . pointerEvents = 'auto' // 恢复正常
} , 300 ) ;
} ) Biarkan elemen tersembunyi menunda sekitar 300 milidetik sebelum menyembunyikannya
btn . addEventListener ( 'touchend' , ( ) => {
setTimeout ( ( ) => {
shade . style . display = 'none'
} , 300 ) ;
} ) 
