Görüntü alanı meta etiketi olmadan mobil cihazlar sayfaları tipik masaüstü ekran genişliklerinde oluşturur ve ardından sayfaları küçülterek okunmalarını zorlaştırır.
Görüntü alanı meta etiketini ayarlamak, görüntü alanının genişliğini ve ölçeklemesini kontrol ederek tüm cihazlarda doğru boyuta sahip olmasını sağlar.
Lighthouse viewport meta etiketi denetimi neden başarısız olur?
Lighthouse, görüntü alanı meta etiketi olmayan sayfaları işaretler:
Aşağıdaki koşulların tümü karşılanmazsa sayfa denetimden geçemez:
- Belgenin <head> bir <meta name="viewport"> etiketi içerir.
- Görüntü alanı meta etiketi bir content özelliği içeriyor.
- content özelliğinin değeri width= metnini içeriyor.
Viewport meta etiketi ekleme
Sayfanızın <head> bölümüne uygun anahtar/değer çiftlerini içeren bir ekran alanı <meta> etiketi ekleyin:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Her anahtar/değer çiftinin işlevi aşağıda açıklanmıştır:
- width=device-width, görüntü alanının genişliğini cihazın genişliğine ayarlar.
- initial-scale=1, kullanıcı sayfayı ziyaret ettiğinde ilk yakınlaştırma düzeyini ayarlar.
İlk ölçek 1'den az
initial-scale 1'den küçük bir değere ayarlandığında tarayıcılar, genellikle mobil cihazlar için optimize edilmemiş masaüstü sitelerinde kullanılan yakınlaştırmak için iki kez dokunma özelliğini etkinleştirebilir. Bu işlem, tarayıcı ikinci bir "çift" dokunma olup olmadığını kontrol ederken tüm dokunma etkileşimlerine 300 milisaniyelik bir gecikme ekler. Bu nedenle, initial-scale 1'den azsa denetim de başarısız olur.