Tanpa tag meta area pandang, perangkat seluler merender halaman pada lebar layar desktop standar, lalu menskalakan halaman, sehingga sulit dibaca.
Dengan menyetel tag meta viewport, Anda dapat mengontrol lebar dan penskalaan viewport sehingga ukurannya tepat di semua perangkat.
Penyebab kegagalan audit tag meta viewport Lighthouse
Lighthouse menandai halaman yang tidak memiliki tag meta viewport:
Halaman gagal dalam audit kecuali semua kondisi berikut terpenuhi:
- <head> dokumen berisi tag <meta name="viewport">.
- Tag meta area tampilan berisi atribut content.
- Nilai atribut content menyertakan teks width=.
Cara menambahkan tag meta viewport
Tambahkan tag <meta> area tampilan 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 setiap key-value pair:
- width=device-width menetapkan lebar area pandang ke lebar perangkat.
- initial-scale=1 menetapkan tingkat zoom awal saat pengguna membuka 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 memperbesar, yang biasanya digunakan untuk situs desktop yang tidak dioptimalkan untuk seluler. Tindakan ini menambahkan penundaan 300 milidetik pada interaksi ketuk apa pun saat browser menunggu untuk memeriksa apakah terjadi ketukan "ganda" kedua. Oleh karena itu, audit juga gagal jika skala awal ditetapkan ke kurang dari 1.