Tanpa tag meta area pandang, perangkat seluler akan merender halaman dengan lebar layar desktop pada umumnya, lalu menskalakan halaman ke bawah, sehingga 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
Lighthouse menandai halaman tanpa tag meta viewport:
Halaman akan gagal dalam audit kecuali jika semua kondisi berikut terpenuhi:
- <head> dokumen berisi tag <meta name="viewport">.
- Tag meta viewport berisi atribut content.
- Nilai atribut content menyertakan 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. Tindakan ini menambahkan penundaan 300 milidetik ke interaksi ketuk apa pun saat browser menunggu untuk memeriksa apakah ketuk "ganda" kedua terjadi. Oleh karena itu, audit juga gagal jika initial-scale ditetapkan ke kurang dari 1.