Mendukung berbagai layar di aplikasi web

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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:

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