Tanpa tag meta area pandang, perangkat seluler merender halaman dengan lebar layar desktop biasa, lalu menskalakan halaman ke bawah, membuatnya sulit dibaca.
Dengan menetapkan tag meta area pandang, Anda dapat mengontrol lebar dan penskalaan area pandang sehingga ukurannya benar di semua perangkat.
Cara audit tag meta viewport Lighthouse gagal
Halaman tanda Lighthouse tanpa tag meta area pandang:
Halaman 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 mencakup teks width=.
Cara menambahkan tag meta viewport
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 ini fungsi setiap pasangan nilai kunci:
- width=device-width menetapkan lebar area pandang ke 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. Ini akan menambahkan penundaan 300 milidetik untuk setiap interaksi ketuk sementara browser menunggu untuk memeriksa apakah "ganda" kedua ketukan terjadi. Oleh karena itu, audit juga gagal jika initial-scale ditetapkan ke kurang dari 1.