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 işaretleme sayfalarını görüntü alanı meta etiketi olmadan:
Aşağıdaki koşulların tümü karşılanmazsa sayfa denetimden geçemez:
- Belgenin <head> bir <meta name="viewport"> etiketi içeriyor.
- Görünüm meta etiketi bir content özelliği içerir.
- content özelliğinin değeri, width= metnini içeriyor.
Görüntü alanı meta etiketi nasıl eklenir?
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 seviyesini ayarlar.
Başlangıç ölçeği 1'den küçük
initial-scale değerinin 1'den düşük bir değere ayarlanması, tarayıcıların iki kez dokunarak yakınlaştırma özelliğini etkinleştirmesine neden olabilir. Bu özellik, genellikle mobil cihazlar için optimize edilmemiş masaüstü sitelerde kullanılır. Bu sayede, tarayıcı ikinci bir "çift" işlemi olup olmadığını kontrol etmek için beklerken, dokunma etkileşimlerine 300 milisaniyelik bir gecikme eklenir. dokundurmanın gerçekleştiği anlamına gelir. Dolayısıyla, ilk ölçek 1'den düşük bir değere ayarlandığında da denetim başarısız olur.