Tanpa tag meta area pandang, perangkat seluler merender halaman dengan lebar layar desktop biasa, lalu memperkecil halaman, sehingga sulit dibaca.
Menyetel tag meta area pandang memungkinkan Anda mengontrol lebar dan penskalaan area pandang agar ukurannya tepat di semua perangkat.
Bagaimana audit tag meta area pandang Lighthouse gagal
Lighthouse menandai halaman tanpa tag meta area pandang:
Sebuah halaman akan gagal dalam audit kecuali jika semua kondisi berikut terpenuhi:
- <head> dokumen berisi tag <meta name="viewport">.
- Tag meta area pandang berisi atribut content.
- Nilai atribut content menyertakan teks width=.
Cara menambahkan tag meta area pandang
Tambahkan tag <meta> area pandang dengan pasangan nilai kunci yang sesuai ke <head>
halaman Anda:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Berikut fungsi dari setiap pasangan nilai kunci:
- width=device-width menetapkan lebar area tampilan sesuai lebar perangkat.
- initial-scale=1 menetapkan tingkat zoom awal saat pengguna mengunjungi halaman.
Skala awal kurang dari 1
Jika initial-scale disetel ke kurang dari 1, hal ini dapat menyebabkan browser mengaktifkan fitur ketuk dua kali untuk zoom, yang biasanya digunakan untuk situs desktop yang tidak dioptimalkan untuk seluler. Tindakan ini akan menambahkan penundaan 300 milidetik ke interaksi ketuk apa pun selagi browser menunggu untuk memeriksa apakah ketukan "ganda" kedua terjadi. Oleh karena itu, audit juga akan gagal jika skala awal ditetapkan di bawah 1.