Komentar: Dengan popularitas ponsel kelas atas (Andriod, iPhone, iPod, WinPhone, dll.), Pengembangan aplikasi internet seluler juga menerima lebih banyak perhatian dari orang-orang. Menggunakan HTML5 untuk mengembangkan aplikasi seluler adalah pilihan terbaik. Namun, setiap ponsel memiliki resolusi dan ukuran layar yang berbeda. Bagaimana aplikasi atau ukuran halaman yang kami kembangkan cocok untuk digunakan di berbagai ponsel kelas atas? Pelajari viewport html5
Pendahuluan Sintaks Viewport:
<!- Dokumen HTML->
<meta name = viewport
konten =
tinggi = [pixel_value | tinggi perangkat],
width = [pixel_value | Perangkat lebar],
skala awal = float_value,
skala minimum = float_value,
skala maksimum = float_value,
User-scalable = [ya | TIDAK] ,
target-densityDpi = [dpi_value | perangkat-dpi | tinggi-dpi | DPI sedang | dpi rendah]
/>
Penjelasan Parameter:
lebar
—-Mengontrol ukuran viewport, yang dapat ditentukan sebagai nilai atau nilai khusus, seperti lebar perangkat, yang merupakan lebar perangkat (unit piksel CSS ketika diskalakan hingga 100%.
tinggi
— - korespondensi dengan lebar, menentukan tinggi.
Target-densityDPI
— - Kepadatan piksel layar ditentukan oleh resolusi layar dan biasanya didefinisikan sebagai jumlah titik per inci (DPI). Android mendukung kepadatan piksel tiga layar: kepadatan piksel rendah, kepadatan piksel sedang, dan kepadatan piksel tinggi. Layar kepadatan piksel rendah memiliki piksel lebih sedikit per inci, sedangkan layar kepadatan piksel tinggi memiliki lebih banyak piksel per inci. Browser Android dan WebView memiliki kepadatan piksel menengah secara default.
Di bawah ini adalah kisaran nilai atribut target-densityDPI
Perangkat-DPI: Gunakan DPI asli perangkat sebagai DP target. Zoom default tidak terjadi.
High-DPI: Gunakan HDPI sebagai target DPI. Perangkat kepadatan piksel menengah dan rendah dikurangi.
DPI menengah: Gunakan MDPI sebagai target DPI. Perangkat kepadatan piksel tinggi diperbesar sesuai, dan perangkat kepadatan piksel dikurangi. Ini adalah kepadatan target default.
Low-DPI: Gunakan MDPI sebagai target DPI. Perangkat kepadatan piksel menengah dan tinggi diamplifikasi sesuai.
<value>: Tentukan nilai DPI tertentu sebagai target DPI. Kisaran nilai ini harus antara 70-400.
<!- Dokumen HTML->
<meta name = viewport content = target densityDpi = device-dpi />
<meta name = viewport content = target densityDpi = high-dpi />
<meta name = viewport konten = target densityDpi = medium-dpi />
<meta name = viewport content = target densityDpi = low-dpi />
<meta name = viewport konten = target densityDpi = 200 ″ />
Untuk mencegah Browser Android dan Webview dari menskalakan halaman Anda berdasarkan kepadatan piksel dari berbagai layar, Anda dapat mengatur densityDPI target viewport ke perangkat-DPI. Saat Anda melakukan ini, halaman tidak akan skala. Sebaliknya, halaman ditampilkan berdasarkan kepadatan piksel dari layar saat ini. Dalam hal ini, Anda juga perlu menentukan lebar viewport agar sesuai dengan lebar perangkat sehingga halaman Anda dapat beradaptasi dengan layar.
skala awal
— - Penskalaan inisial. Artinya, level zoom awal halaman. Ini adalah nilai titik mengambang, pengganda ukuran halaman. Misalnya, jika Anda mengatur penskalaan awal ke 1.0, halaman web akan ditampilkan dengan resolusi 1: 1 dari kepadatan target. Jika Anda mengaturnya ke 2.0, maka halaman ini akan diperbesar menjadi 2x.
skala maksimum
— - zoom maksimum. Itu adalah derajat penskalaan maksimum yang diizinkan. Ini juga merupakan nilai titik mengambang yang menunjukkan pengganda maksimum ukuran halaman dibandingkan dengan ukuran layar. Misalnya, jika Anda menetapkan nilai ini ke 2.0, halaman ini dapat diperbesar hingga 2 kali dibandingkan dengan ukuran target.
skala pengguna
— - Pengguna menyesuaikan zoom. Artinya, apakah pengguna dapat mengubah level zoom halaman. Jika diatur ke ya, pengguna akan mengizinkannya mengubahnya, jika tidak, itu tidak. Nilai defaultnya adalah ya. Jika Anda mengaturnya ke NO, skala minimum dan skala maksimum akan diabaikan karena penskalaan tidak mungkin.
Semua nilai penskalaan harus berada dalam kisaran 0,01-10.
Contoh: 1. Atur lebar layar ke lebar perangkat, melarang pengguna untuk menyesuaikan zoom secara manual
<meta name = viewport content = width = device-width, user-scalable = no />
2. Atur kepadatan layar ke penskalaan otomatis frekuensi tinggi, frekuensi sedang dan frekuensi rendah, dan melarang pengguna untuk menyesuaikan penskalaan secara manual
<meta name = viewport content = width = perangkat-lebar, target-densityDpi = dpi tinggi, skala awal = 1.0, skala minimum = 1.0, skala maksimum = 1.0, skala pengguna = no/>