Komentar: 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?
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? Mempelajari penggunaan viewport html5 dapat membantu Anda melakukan ini ...
Pendahuluan Sintaks Viewport:
<!-dokumen html->
<meta
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]
"
/>
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
Sesuai dengan lebar, tentukan ketinggiannya.
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
Device-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.
Medium-DPI-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. Nilai ini harus berkisar dari 70-400.
<!-dokumen html->
<meta content = "target-densityDpi = device-dpi" />
<meta content = "target-densitydpi = high-dpi" />
<meta content = "target-densitydpi = medium-dpi" />
<meta content = "target-densityDpi = rendah-dpi" />
<meta content = "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 awal. 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:
(Atur lebar layar ke lebar perangkat, dan melarang pengguna untuk menyesuaikan zoom secara manual)
<meta name = viewport content = width = device-width, user-scalable = no />
(Atur kepadatan layar untuk secara otomatis memperbesar frekuensi tinggi, frekuensi sedang, dan frekuensi rendah, dan melarang pengguna untuk menyesuaikan zoom 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/>