Analisis tag viewport dan penggunaan CSS terkait dalam pengembangan seluler HTML5

Artikel ini terutama memperkenalkan tag viewport dan analisis penggunaan CSS terkait dalam pengembangan seluler HTML5. Viewport sering disebut viewport atau viewport, dan memainkan peran penting dalam tata letak seluler dan adaptasi layar. Teman yang membutuhkannya bisa merujuknya.

Viewport (viewport) yang biasa disebutkan di front-end seluler adalah area layar di mana browser menampilkan konten halaman. Beberapa konsep penting yang terlibat adalah hubungan antara DIP (piksel perangkat piksel-independen perangkat) dan piksel CSS. Di sini pertama -tama kita memahami konsep -konsep berikut.

Secara umum, browser pada perangkat seluler mengatur tag meta viewport secara default, mendefinisikan viewport tata letak virtual untuk menyelesaikan masalah tampilan halaman awal pada ponsel. iOS dan Android pada dasarnya menetapkan resolusi viewport ini ke 980px, sehingga halaman web pada PC pada dasarnya dapat disajikan di telepon, tetapi elemen terlihat sangat kecil, dan halaman web umumnya dapat dikurangi secara manual secara default.

Visual Viewport (Visual Viewport) menyediakan area visual layar fisik, piksel fisik layar layar, ukuran layar yang sama, perangkat dengan kepadatan piksel tinggi, dan piksel perangkat keras akan lebih. Misalnya, piksel fisik iPhone:

iPhone5: 640 * 1136

iPhone 6: 750 * 1334

iPhone6 ​​Plus: 1242 * 2208

Viewport dan DIP yang ideal (piksel logika perangkat)

Viewport yang ideal biasanya adalah apa yang kami sebut resolusi layar.

DIP (Pixel Logika Perangkat) tidak ada hubungannya dengan piksel perangkat keras perangkat. Dip mengambil ruang yang sama pada layar perangkat dengan kepadatan piksel apa pun.

Misalnya, piksel perangkat keras dari tampilan layar retina dari MacBook Pro adalah: 2880 * 1800. Ketika Anda mengatur resolusi layar ke 1920 * 1200, nilai lebar viewport ideal adalah 1920 piksel, dan nilai lebar DIP adalah 1920. Rasio piksel perangkat adalah 1,5 (2880/1920). Hubungan antara lebar piksel logis dan lebar piksel fisik (resolusi piksel) perangkat memenuhi formula berikut:

Resolusi layar ponsel biasanya tidak diizinkan. Ini umumnya nilai tetap yang ditetapkan oleh produsen perangkat secara default. Dengan kata lain, nilai DIP adalah nilai viewport ideal (mis. Resolusi). Misalnya, resolusi layar iPhone:

iPhone5: Resolusi 320*568, piksel fisik 640*1136, @2x

iPhone6: Resolusi 375*667, piksel fisik 750*1334, @2x

iPhone6 ​​Plus: Resolusi 414 * 736, piksel fisik 1242 * 2208, @3x, (perhatikan bahwa rasio gambar yang ditampilkan aktual dikurangi menjadi 1080 × 1920, alasan spesifik akan diperkenalkan pada akhir artikel kami)

Unit CSS Pixels (PX) yang digunakan untuk tata letak halaman. Ukuran piksel gaya (misalnya lebar: 100px) ditentukan dalam piksel CSS. Rasio piksel CSS untuk dicelupkan adalah rasio penskalaan halaman web. Jika halaman web tidak menskalakan, maka piksel CSS sesuai dengan DIP (Pixel Logika Perangkat).

Gunakan tag meta viewport untuk mengontrol tata letak

Pertama, mari kita lihat sifat ekstrem dari tag meta viewport: