Viewport meta etiketi olmadan mobil cihazlar sayfaları normal masaüstü ekran genişliklerinde oluşturur ve ardından sayfaları küçülterek okunmalarını zorlaştırır.
Viewport meta etiketini ayarlayarak viewport'un genişliğini ve ölçeklendirmesini kontrol edebilir, böylece tüm cihazlarda doğru boyutta görünmesini sağlayabilirsiniz.
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şılanmadığı sürece bir sayfa denetimi geçemez:
- Dokümanın <head> bölümünde bir <meta name="viewport"> etiketi bulunur.
- Viewport meta etiketi bir content özelliği içeriyor.
- content özelliğinin değeri width= metnini içeriyor.
Viewport meta etiketi ekleme
Sayfanızın <meta> bölümüne uygun anahtar/değer çiftleriyle bir görünüm alanı <head> 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ünüm 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.
1'den küçük initial-scale
initial-scale değeri 1'den küçük olduğunda 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, tarayıcı ikinci bir "çift" dokunma olup olmadığını kontrol ederken dokunma etkileşimlerine 300 milisaniyelik bir gecikme ekler. Bu nedenle, initial-scale 1'den küçük olarak ayarlandığında da denetim başarısız olur.