Halaman ini diterjemahkan oleh Cloud Translation API.

WebView yang sempurna

Dipublikasikan: 28 Februari 2014

Ada sejumlah opsi yang dapat Anda gunakan untuk membuat antarmuka yang sempurna untuk WebView Anda.

Menetapkan tag meta viewport

Tag meta area pandang adalah tag terpenting yang harus ditambahkan ke aplikasi web Anda. Tanpa tag ini, WebView dapat berperilaku seolah-olah situs Anda dirancang untuk browser desktop. Hal ini menyebabkan halaman web Anda diberi lebar yang lebih besar (biasanya 980 piksel) dan menskalakannya agar sesuai dengan lebar WebView. Pada umumnya, hal ini menghasilkan versi ringkas ringkasan halaman yang mengharuskan pengguna menggeser dan memperbesar untuk benar-benar membaca konten.

Jika Anda ingin lebar situs Anda menjadi 100% dari lebar WebView, tetapkan tag meta area pandang:

<meta name="viewport" content="width=device-width, initial-scale=1">

Tetapkan lebar ke nilai khusus device-width untuk mendapatkan kontrol lebih besar atas tata letak halaman.

Secara default, WebView menetapkan area pandang ke lebar perangkat, bukan area pandang desktop secara default. Namun, untuk perilaku yang andal dan terkontrol, sebaiknya sertakan tag meta area pandang.

Menampilkan situs desktop

Dalam beberapa kasus, Anda mungkin perlu menampilkan konten yang tidak dirancang untuk perangkat seluler. Misalnya, Anda dapat menampilkan konten yang tidak Anda kontrol. Dalam hal ini, Anda dapat memaksa WebView untuk menggunakan area pandang ukuran desktop:

Jika metode ini tidak ditetapkan dan tidak ada area pandang yang ditentukan, WebView akan mencoba menetapkan lebar area pandang berdasarkan ukuran konten.

Selain itu, Anda dapat menggunakan algoritma tata letak TEXT_AUTOSIZING, yang meningkatkan ukuran font agar lebih mudah dibaca di perangkat seluler. Lihat setLayoutAlgorithm.

Menggunakan desain responsif

Desain responsif adalah pendekatan untuk mendesain antarmuka yang berubah berdasarkan ukuran layar.

Ada sejumlah cara untuk menerapkan desain responsif. Salah satu yang paling umum adalah kueri @media, yang menerapkan CSS ke elemen berdasarkan karakteristik perangkat.

Misalnya, Anda ingin beralih dari tata letak vertikal ke tata letak horizontal berdasarkan orientasi. Tetapkan properti CSS ke potret secara default:

.page-container {
    display: -webkit-box;
    display: flex;

    -webkit-box-orient: vertical;
    flex-direction: column;

    padding: 20px;
    box-sizing: border-box;
}

Untuk beralih ke tata letak horizontal, alihkan properti flex-direction berdasarkan orientasi:

@media screen and (orientation: landscape) {
  .page-container.notification-opened {
    -webkit-box-orient: horizontal;
    flex-direction: row;
  }

  .page-container.notification-opened > .notification-arrow {
    margin-right: 20px;
  }
}

Anda juga dapat mengubah tata letak berdasarkan lebar layar.

Misalnya, menyesuaikan ukuran lebar tombol dari 100% menjadi lebih kecil seiring bertambahnya ukuran layar fisik.

button {
  display: block;
  width: 100%;
  ...
}

@media screen and (min-width: 500px) {
  button {
    width: 60%;
  }
}

@media screen and (min-width: 750px) {
  button {
    width: 40%;
    max-width: 400px;
  }
}

Ini adalah perubahan kecil, tetapi bergantung pada UI Anda, kueri media dapat membantu Anda membuat perubahan yang jauh lebih besar pada tampilan aplikasi, sekaligus mempertahankan HTML yang sama.

Gambar yang tajam dan jelas

Berbagai ukuran dan kepadatan layar juga menghadirkan tantangan bagi gambar. Gambar yang lebih kecil memerlukan lebih sedikit memori dan lebih cepat dimuat, tetapi akan buram jika Anda meningkatkan skalanya.

Berikut beberapa tips dan trik untuk memastikan gambar Anda terlihat tajam dan jelas di layar mana pun:

Gunakan CSS untuk efek yang skalabel.
Gunakan grafik vektor.
Berikan foto beresolusi tinggi.

Menggunakan CSS untuk efek yang skalabel

Gunakan CSS jika memungkinkan, bukan gambar. Mungkin beberapa kombinasi properti CSS dapat mahal untuk dirender. Selalu uji kombinasi tertentu yang Anda gunakan.

Pelajari lebih lanjut First Contentful Paint (FCP), yang mengukur waktu dari saat pengguna pertama kali membuka halaman hingga saat bagian mana pun dari konten halaman dirender di layar. "Konten" mengacu pada teks, gambar (termasuk gambar latar belakang), elemen <svg>, dan elemen <canvas> non-putih.

Gunakan grafik vektor

Scalable Vector Graphics (SVG) adalah cara yang bagus untuk menyediakan gambar yang skalabel. Untuk gambar yang sangat cocok dengan grafik vektor, SVG menyediakan gambar berkualitas tinggi dengan ukuran file yang sangat kecil.

Menyediakan foto beresolusi tinggi

Gunakan foto yang sesuai untuk perangkat DPI tinggi dan skalakan gambar menggunakan CSS. Dengan cara ini, gambar dapat dirender dalam kualitas tinggi di seluruh perangkat. Jika menggunakan kompresi tinggi (setelan kualitas rendah) saat membuat gambar, Anda mungkin dapat mencapai hasil visual yang baik dengan ukuran file yang wajar.

Pendekatan ini memiliki beberapa potensi kekurangan: gambar yang dikompresi secara maksimal dapat menampilkan beberapa artefak visual, sehingga Anda perlu bereksperimen untuk menentukan tingkat kompresi yang dapat diterima. Selain itu, mengubah ukuran gambar di CSS dapat menjadi operasi yang mahal.

Jika kompresi tinggi tidak sesuai dengan kebutuhan Anda, coba format WebP, yang memberikan gambar berkualitas tinggi dengan ukuran file yang relatif kecil. Jangan lupa untuk menyediakan penggantian untuk versi Android yang tidak mendukung WebP.

Kontrol terperinci

Dalam banyak kasus, Anda tidak dapat menggunakan satu image untuk semua perangkat. Dalam hal ini, Anda dapat memilih gambar yang berbeda berdasarkan ukuran dan kepadatan layar. Gunakan kueri media untuk memilih gambar latar berdasarkan ukuran dan kepadatan layar.

Anda dapat menggunakan JavaScript untuk mengontrol cara gambar dimuat, tetapi hal ini akan menambah kompleksitas.

Kueri media dan kepadatan layar

Untuk memilih gambar berdasarkan kepadatan layar, Anda harus menggunakan unit dpi atau dppx dalam kueri media. Unit dpi mewakili titik per inci CSS, dan dppx mewakili titik per piksel CSS.

Dalam tabel berikut, Anda dapat melihat hubungan antara dpi dan dppx.

Rasio piksel perangkat	Kepadatan layar umum	Titik per inci CSS (`dpi`)	Titik per piksel CSS (`dppx`)
1x	MDPI	96`dpi`	1`dppx`
1,5x	HDPI	144`dpi`	1,5`dppx`
2	XHDPI	192`dpi`	2`dppx`

Bucket kepadatan layar umum ditentukan oleh Android dan digunakan di tempat lain untuk menyatakan kepadatan layar (misalnya, https://screensiz.es).

Gambar latar

Anda dapat menggunakan kueri media untuk menetapkan gambar latar ke elemen. Misalnya, jika Anda memiliki gambar logo dengan ukuran 256x256 piksel di perangkat dengan rasio piksel 1,0, Anda dapat menggunakan aturan CSS berikut:

.welcome-header > h1 {
  flex: 1;

  width: 100%;

  max-height: 256px;
  max-width: 256px;

  background-image: url('../images/html5_256x256.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

Untuk menggantinya dengan gambar yang lebih besar di perangkat dengan rasio piksel perangkat 1,5 (hdpi) dan 2,0 (xhdpi), Anda dapat menambahkan aturan berikut:

@media screen and (min-resolution: 1.5dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_384x384.png');
  }
}

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

Kemudian, Anda dapat menggabungkan teknik ini dengan kueri media lainnya, seperti min-width, yang berguna saat Anda memperhitungkan berbagai faktor bentuk.

@media screen and (min-resolution: 2dppx) {
  .welcome-header > h1{
    background-image: url('../images/html5_512x512.png');
  }
}

@media screen and (min-resolution: 2dppx) and (min-width: 1000px) {
  .welcome-header > h1{
    background-image: url('../images/html5_1024x1024.png');

    max-height: 512px;
    max-width: 512px;
  }
}

Anda mungkin melihat bahwa max-height dan max-width ditetapkan ke 512 piksel untuk resolusi 2ddpx, dengan gambar 1024x1024 piksel. Hal ini karena "piksel" CSS sebenarnya memperhitungkan rasio piksel perangkat (512 piksel * 2 = 1024 piksel).

Bagaimana dengan `<img/>`?

Web saat ini tidak memiliki solusi untuk hal ini. Ada beberapa proposal, tetapi proposal tersebut tidak tersedia di browser saat ini atau di WebView.

Sementara itu, jika Anda membuat DOM di JavaScript, Anda dapat membuat beberapa resource gambar dalam struktur direktori yang cermat:

images/
  mdpi/
    imagename.png
  hdpi/
    imagename.png
  xhdpi/
    imagename.png

Kemudian, gunakan rasio piksel untuk mencoba mengambil gambar yang paling sesuai:

function getDensityDirectoryName() {
  if(!window.devicePixelRatio) {
    return 'mdpi';
  }

  if(window.devicePixelRatio > 1.5) {
    return 'xhdpi';
  } else if(window.devicePixelRatio > 1.0) {
    return 'hdpi';
  }

  return 'mdpi';
}

Atau, Anda dapat mengubah URL dasar halaman untuk menentukan URL relatif untuk gambar.

<!doctype html>
<html class="no-js">
<head>
  <script>
    function getDensityDirectoryName() {
      if(!window.devicePixelRatio) {
          return 'mdpi';
      }

      if(window.devicePixelRatio > 1.5) {
          return 'xhdpi';
      } else if(window.devicePixelRatio > 1.0) {
          return 'hdpi';
      }

      return 'mdpi';
    }

    var baseUrl =
        'file:///android_asset/www/img-js-diff/ratiores/'+getDensityDirectoryName()+'/';
    document.write('<base href="'+baseUrl+'">');
  </script>

    ...
</head>
<body>
    ...
</body>
</html>

Pendekatan ini memblokir pemuatan halaman dan memaksa penggunaan jalur absolut untuk semua resource, seperti gambar, skrip, dan file CSS, karena URL dasar mengarah ke direktori khusus kepadatan.