Karena Android tersedia di perangkat dengan berbagai ukuran layar dan kepadatan piksel, Anda
harus memperhitungkan faktor ini dalam desain web sehingga halaman selalu muncul dalam
ukuran yang sesuai. WebView
mendukung fitur DOM, CSS, dan tag meta untuk membantu memastikan bahwa konten
web dirender dengan benar.
Saat menargetkan halaman web untuk perangkat Android, ada dua faktor utama yang harus Anda perhitungkan:
- 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. Hal yang paling penting adalah lebar area pandang, yang menentukan jumlah total piksel horizontal yang tersedia dari sudut pandang halaman web (jumlah piksel CSS yang ada).
- Kepadatan layar
- Class
WebView
dan sebagian besar browser web di Android mengonversi nilai piksel CSS Anda ke nilai piksel kepadatan-mandiri, sehingga halaman web Anda dapat muncul dalam ukuran yang sama yang dapat dilihat sebagai layar dengan kepadatan menengah (sekitar 160 dpi). Namun, jika grafis merupakan elemen penting dari desain web Anda, Anda harus memperhatikan penskalaan yang terjadi pada kepadatan yang berbeda, karena gambar yang memiliki lebar 300 px pada layar 320 dpi akan ditingkatkan (menggunakan lebih banyak piksel fisik per piksel CSS), yang dapat menghasilkan artefak seperti pemburaman dan pikselasi. Demi kemudahan, 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 pelatihan tentang kepadatan layar ini.
Lihat resource terkait berikut:
- UI Pixel-Perfect di WebView
- Membuat Desain Web Khusus Seluler yang Responsif
- Gambar DPI Tinggi untuk Kepadatan Piksel Variabel
Menentukan properti area pandang
Area pandang adalah area tempat halaman web Anda digambar. Meskipun area yang terlihat dari total area pandang sesuai dengan ukuran layar saat diperbesar hingga batas maksimum, area pandang memiliki dimensi pikselnya sendiri yang tersedia 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 pada lebar 800 piksel terlihat sepenuhnya di layar jika skala area pandangnya 1,0. Sebagian browser web di Android (termasuk Chrome) menyetel area pandang ke ukuran besar secara default (dikenal sebagai "mode area pandang lebar" dengan lebar sekitar 980 px). Beberapa browser juga memperkecil gambar sekecil mungkin, secara default, untuk menampilkan lebar area pandang yang penuh (dikenal sebagai "mode ringkasan").
Catatan:
Saat halaman dirender dalam WebView
, halaman tidak menggunakan mode area pandang lebar
(halaman muncul dalam zoom penuh) secara default. Anda dapat mengaktifkan mode area pandang lebar
dengan setUseWideViewPort()
.
Anda dapat menentukan properti area pandang untuk halaman web, seperti lebar dan tingkat zoom
awal, menggunakan tag <meta name="viewport" ...>
dalam <head>
dokumen
Anda.
Sintaks berikut menampilkan semua properti area pandang yang didukung dan jenis nilai yang diterima oleh setiap properti berikut:
<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
harus sama persis dengan lebar layar perangkat dan kemampuan untuk zoom harus dinonaktifkan:
<head> <title>Example</title> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head>
Saat mengoptimalkan situs Anda untuk perangkat seluler, sebaiknya selalu tetapkan lebar area pandang ke
"device-width"
sehingga ukuran cocok di semua perangkat, lalu gunakan kueri media CSS agar
dapat beradaptasi secara fleksibel pada tata letak untuk menyesuaikan dengan berbagai ukuran layar.
Catatan: Sebaiknya nonaktifkan penskalaan pengguna hanya jika Anda yakin bahwa tata letak halaman web bersifat fleksibel dan kontennya akan cocok dengan lebar layar kecil.
Menargetkan kepadatan perangkat dengan CSS
WebView
mendukung fitur media CSS yang memungkinkan
Anda membuat gaya untuk kepadatan
layar tertentu—fitur media CSS -webkit-device-pixel-ratio
. Nilai
yang Anda terapkan pada fitur ini harus di antara
"0,75", "1,0", atau "1,5", mengindikasikan bahwa gaya tersebut ditujukan untuk perangkat dengan tingkat kepadatan layar rendah, sedang,
atau tinggi, secara berurutan.
Misalnya, 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-beda 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 informasi selengkapnya tentang cara menangani kepadatan layar yang berbeda, khususnya gambar, lihat Gambar DPI Tinggi untuk Variabel Kepadatan Piksel.
Menargetkan kepadatan perangkat dengan JavaScript
WebView
mendukung properti DOM yang memungkinkan Anda
untuk membuat kueri kepadatan perangkat
saat ini—properti DOM window.devicePixelRatio
. Nilai properti ini
menentukan faktor penskalaan yang digunakan untuk perangkat saat ini. Misalnya, jika nilai
window.devicePixelRatio
adalah "1,0", maka perangkat tersebut dianggap memiliki kepadatan sedang
dan penskalaan tidak diterapkan secara default; jika nilainya "1,5", perangkat tersebut
dianggap memiliki kepadatan tinggi dan halaman diskalakan 1,5x secara default; jika nilainya
adalah "0,75", maka perangkat tersebut dianggap memiliki kepadatan rendah dan halaman diskalakan
0,75x secara default. Tentunya, penskalaan yang diterapkan Browser Android dan WebView
didasarkan pada kepadatan target
halaman web—seperti yang dijelaskan di bagian tentang Menentukan
kepadatan target area pandang, target default-nya adalah kepadatan sedang, tetapi Anda dapat mengganti
targetnya untuk memengaruhi cara halaman web 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"); }