Karena Android tersedia di perangkat dengan berbagai ukuran layar dan kepadatan piksel,
perhitungkan faktor ini dalam desain web Anda sehingga halaman Anda memiliki ukuran yang tepat.
WebView
mendukung fitur DOM, CSS, dan tag meta untuk membantu Anda merender konten web dengan benar.
Saat menargetkan halaman web untuk perangkat yang didukung Android, ada dua faktor utama yang harus diperhitungkan:
- Area pandang
- Area pandang adalah area persegi panjang yang menyediakan wilayah yang dapat digambar untuk halaman web Anda. Anda dapat menentukan beberapa properti area pandang, seperti ukuran dan skala awalnya. Yang paling penting adalah lebar area pandang, yang menentukan jumlah total piksel horizontal yang tersedia dari sudut pandang halaman web—jumlah piksel CSS yang tersedia.
- Kepadatan layar
- Class
WebView
dan sebagian besar browser web di Android mengonversi nilai piksel CSS Anda menjadi nilai piksel kepadatan mandiri, sehingga halaman web Anda muncul dalam ukuran yang dapat dilihat sebagai layar berkepadatan sedang, yaitu sekitar 160 dpi. Namun, jika grafis merupakan elemen penting dari desain web, perhatikan penskalaan yang terjadi pada kepadatan yang berbeda. Misalnya, gambar dengan lebar 300 px pada layar 320 dpi akan ditingkatkan skalanya dan menggunakan lebih banyak piksel fisik per piksel CSS. Teknik ini dapat menghasilkan artefak seperti pemburaman dan pikselasi. Untuk mempermudah, Android menciutkan sebagian besar kepadatan layar yang lebih kecil ke dalam beberapa kategori umum: kecil, sedang, dan besar. Untuk mempelajari kepadatan layar lebih lanjut, baca Mendukung kepadatan piksel yang berbeda-beda.
Lihat referensi terkait berikut ini:
- UI Pixel-Perfect di WebView
- Pelajari Desain Responsif
- Gambar DPI tinggi untuk kepadatan piksel variabel
Tentukan properti area pandang
Area pandang adalah area tempat halaman web Anda digambar. Meskipun total area yang terlihat dari area pandang sesuai dengan ukuran layar saat di-zoom sepenuhnya, area pandang memiliki dimensi pikselnya sendiri yang disediakan untuk halaman web. Misalnya, meskipun layar perangkat mungkin memiliki lebar fisik 480 piksel, area pandang dapat memiliki lebar 800 piksel. Hal ini memungkinkan halaman web yang didesain dengan lebar 800 piksel terlihat sepenuhnya di layar jika skala area pandang adalah 1,0.
Sebagian besar browser web di Android—termasuk Chrome—menyetel area pandang ke ukuran besar secara default. _mode area pandang lebar_ ini memiliki lebar sekitar 980 px. Banyak browser juga memperkecil secara default untuk menampilkan lebar area pandang penuh, yang dikenal sebagai _overview mode_.
Anda dapat menentukan properti area pandang untuk halaman web, seperti lebar dan tingkat zoom
awal, menggunakan tag <meta name="viewport" ...>
dalam <head>
dokumen
Anda.
Sintaksis berikut menampilkan semua properti area pandang yang didukung dan jenis nilai yang diterima oleh masing-masing properti:
<meta name="viewport" content=" height = [pixel_value | "device-height"] , width = [pixel_value | "device-width"] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = ["yes" | "no"] " />
Misalnya, tag <meta>
berikut menentukan bahwa lebar area pandang cocok dengan
lebar layar perangkat dan kemampuan untuk melakukan zoom dinonaktifkan:
<head> <title>Example</title> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head>
Saat mengoptimalkan situs untuk perangkat seluler, Anda biasanya menetapkan lebar ke
"device-width"
sehingga ukurannya pas di semua perangkat, lalu menggunakan kueri media CSS untuk
menyesuaikan tata letak secara fleksibel agar sesuai dengan berbagai ukuran layar.
Menargetkan kepadatan perangkat dengan CSS
WebView
mendukung -webkit-device-pixel-ratio
yang merupakan fitur media CSS
yang memungkinkan Anda membuat gaya untuk kepadatan layar tertentu. Nilai yang Anda terapkan ke fitur
ini harus 0,75, 1, atau 1,5, untuk menunjukkan bahwa gaya tersebut ditujukan untuk perangkat dengan layar berkepadatan
rendah, sedang, atau
tinggi.
Anda dapat membuat stylesheet terpisah untuk setiap kepadatan:
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /> <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
Atau tentukan gaya yang berbeda dalam satu stylesheet:
#header { background:url(medium-density-image.png); } @media screen and (-webkit-device-pixel-ratio: 1.5) { /* CSS for high-density screens */ #header { background:url(high-density-image.png); } } @media screen and (-webkit-device-pixel-ratio: 0.75) { /* CSS for low-density screens */ #header { background:url(low-density-image.png); } }
Untuk mengetahui informasi selengkapnya tentang cara menangani berbagai kepadatan layar, terutama gambar, lihat Gambar DPI tinggi untuk kepadatan piksel variabel.
Menargetkan kepadatan perangkat dengan JavaScript
WebView
mendukung window.devicePixelRatio
yang merupakan properti DOM yang
memungkinkan Anda membuat kueri kepadatan perangkat saat ini. Nilai properti ini menentukan faktor penskalaan
yang digunakan untuk perangkat saat ini. Jika nilai window.devicePixelRatio
adalah 1,0, perangkat akan dianggap sebagai perangkat berkepadatan sedang dan tidak ada penskalaan yang diterapkan secara default. Jika
nilainya 1,5, perangkat dianggap sebagai perangkat berkepadatan tinggi dan halaman akan diskalakan 1,5x secara
default. Jika nilainya adalah 0,75, perangkat akan dianggap sebagai perangkat berkepadatan rendah dan halaman
diskalakan 0,75x secara default.
Penskalaan yang diterapkan oleh browser Android dan WebView
didasarkan pada kepadatan target halaman web. Seperti yang dijelaskan di bagian menentukan kepadatan target
area pandang, target default-nya adalah kepadatan sedang, tetapi Anda dapat mengubah target untuk memengaruhi
cara halaman web Anda diskalakan untuk kepadatan layar yang berbeda.
Misalnya, berikut ini cara Anda dapat membuat kueri kepadatan perangkat dengan JavaScript:
if (window.devicePixelRatio == 1.5) { alert("This is a high-density screen"); } else if (window.devicePixelRatio == 0.75) { alert("This is a low-density screen"); }