Görüntü alanı meta etiketi olmadığında mobil cihazlar sayfaları tipik masaüstü ekran genişliklerinde oluşturur, ardından sayfaları küçültür ve bu nedenle sayfaların okunmasını zorlaştırır.
Görünüm meta etiketinin ayarlanması, görüntü alanının genişliğini ve ölçeklemesini kontrol ederek tüm cihazlarda doğru bir şekilde boyutlandırılmasını sağlar.
Lighthouse görüntü alanı meta etiketi denetimi nasıl başarısız oluyor?
Lighthouse, görüntü alanı meta etiketi olmayan sayfaları işaretler:
Şu koşulların tamamı karşılanmadığı sürece bir sayfa denetimde başarısız olur:
- Dokümanın <head> etiketi bir <meta name="viewport"> etiketi içeriyor.
- Görünüm meta etiketi, bir content özelliği içeriyor.
- content özelliğinin değeri, width= metnini içerir.
Görünüm meta etiketi nasıl eklenir?
Sayfanızın <head> öğesine, uygun anahtar/değer çiftleriyle bir görüntü alanı <meta> etiketi ekleyin:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Her bir anahtar/değer çiftinin işlevi şunlardı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 başlangıç yakınlaştırma düzeyini ayarlar.
1'den küçük başlangıç ölçeği
initial-scale 1'den küçük bir değere ayarlandığında, bu durum tarayıcıların yakınlaştırmak için iki kez dokunma özelliğini etkinleştirmesine neden olabilir. Bu özellik, genellikle mobil cihazlar için optimize edilmemiş masaüstü sitelerinde kullanılır. Bu, tarayıcı ikinci bir "iki kez" dokunuşun gerçekleşip gerçekleşmediğini kontrol etmek için beklerken tüm dokunma etkileşimlerine 300 milisaniyelik bir gecikme ekler. Dolayısıyla, başlangıç ölçeği 1'den küçük bir değere ayarlandığında da denetim başarısız olur.