Mendukung layar yang berbeda-beda di aplikasi web

Karena Android tersedia di perangkat dengan berbagai ukuran layar dan kepadatan piksel, memperhitungkan faktor-faktor ini dalam desain web Anda sehingga halaman Anda memiliki ukuran yang tepat. WebView mendukung DOM, CSS, dan tag meta untuk membantu Anda menampilkan konten web dengan tepat.

Saat menargetkan laman web untuk perangkat yang didukung Android, ada dua faktor utama yang diperhitungkan untuk:

Area pandang
Area pandang adalah area persegi panjang yang menyediakan wilayah yang dapat digambar untuk halaman web Anda. Anda bisa menentukan beberapa properti area pandang, seperti ukuran dan skala awalnya. Yang paling penting adalah lebar area pandang, yang mendefinisikan jumlah total piksel horizontal yang tersedia dari sudut pandang—jumlah piksel CSS yang tersedia.
Kepadatan layar
Class WebView dan sebagian besar browser web di Android mengonversi nilai piksel CSS Anda dengan nilai piksel kepadatan mandiri, sehingga laman web Anda tampil dengan ukuran yang sama dan dapat dilihat layar berkepadatan sedang—sekitar 160 dpi. Namun, jika grafis adalah elemen penting dari desain web, perhatikan skala yang terjadi pada kepadatan yang berbeda. Misalnya, gambar dengan lebar 300 px pada layar 320 dpi akan ditingkatkan skalanya—ini menggunakan lebih banyak piksel fisik per CSS piksel. Mode ini dapat menghasilkan artefak seperti pemburaman dan pikselasi. Untuk mempermudah, Android diciutkan sebagian besar kepadatan layar yang lebih kecil ke dalam beberapa kategori umum: kecil, sedang, dan besar. Untuk mempelajari selengkapnya tentang kepadatan layar, baca Mendukung kepadatan piksel yang berbeda.

Lihat referensi terkait berikut:

Menentukan properti area pandang

Area pandang adalah area tempat halaman web Anda digambar. Meskipun total area pandang yang terlihat area sesuai dengan ukuran layar saat diperbesar hingga maksimal, area pandang memiliki piksel sendiri dimensi yang disediakan untuk sebuah laman web. Misalnya, meskipun layar perangkat mungkin memiliki lebar fisik 480 piksel, area pandang dapat memiliki lebar 800 piksel. Hal ini memungkinkan suatu laman web yang dirancang pada lebar 800 piksel akan terlihat sepenuhnya di layar ketika skala area pandang 1,0.

Paling sering browser web di Android—termasuk Chrome—menyetel area pandang ke ukuran yang besar secara default. _Mode area pandang lebar_ ini lebarnya sekitar 980 px. Banyak {i>browser<i} juga memperkecil tampilan sejauh mungkin secara default menampilkan lebar area pandang penuh, yang dikenal sebagai _mode ringkasan_.

Anda dapat menentukan properti area pandang untuk halaman web, seperti lebar dan zoom awal level, menggunakan tag <meta name="viewport" ...> dalam dokumen Anda <head>.

Sintaksis berikut menampilkan semua properti area tampilan yang didukung dan jenis nilai disetujui oleh masing-masing pihak:

<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 lebar layar perangkat dan kemampuan 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" agar ukuran pas di semua perangkat, lalu gunakan 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 media CSS yang memungkinkan Anda membuat gaya untuk kepadatan layar tertentu. Nilai yang Anda terapkan fitur harus bernilai 0,75, 1, atau 1,5, untuk menunjukkan bahwa gaya ditujukan untuk perangkat dengan nilai rendah, sedang, atau layar dengan kepadatan 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 tetapkan 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 informasi selengkapnya tentang menangani kepadatan layar yang berbeda, 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 melakukan kueri kepadatan perangkat saat ini. Nilai properti ini menentukan penskalaan faktor yang digunakan untuk perangkat saat ini. Jika nilai window.devicePixelRatio adalah 1,0, perangkat dianggap sebagai perangkat kepadatan sedang, dan tidak ada penskalaan yang diterapkan secara default. Jika adalah 1,5, maka perangkat dianggap sebagai perangkat kepadatan tinggi, dan halaman diskalakan 1,5x dengan secara default. Jika nilainya 0,75, maka perangkat dianggap sebagai perangkat berkepadatan rendah, dan laman diskalakan 0,75x secara {i>default<i}.

Penskalaan yang diterapkan oleh browser Android dan WebView didasarkan pada target kepadatan tertentu. Seperti yang dijelaskan di bagian menentukan area pandang target kepadatan, target default-nya adalah kepadatan sedang, tetapi Anda dapat mengubah target tersebut untuk terpengaruh bagaimana halaman web Anda diskalakan untuk berbagai 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");
}