Mendukung layar yang berbeda-beda di aplikasi web

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:

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");
}