Viewport (Görüntü Alanı) Nedir?
Kısa tanım
Viewport (görüntü alanı), tarayıcı penceresinde web sayfasının o anda görülebilen dikdörtgen bölümüdür. Masaüstünde pencere boyutuna, mobilde ise ekran genişliğine ve yakınlaştırma düzeyine bağlıdır. CSS yerleşimi ve vw/vh gibi birimler bu alana göre hesaplanır. Mobil cihazlarda sayfanın ekran genişliğine göre çizilmesi için HTML'in head bölümünde meta viewport etiketi kullanılır.
Diğer adları: görüntü alanı, meta viewport, viewport meta etiketi, layout viewport, visual viewport
Layout viewport ve visual viewport
Tarayıcıda aslında iki ayrı görüntü alanı vardır. Layout viewport, CSS'in yerleşimi hesaplarken temel aldığı alandır; position: fixed öğeler, yüzdelik genişlikler ve vw/vh birimleri buna göre çözülür. Visual viewport ise kullanıcının o an gerçekten gördüğü kısımdır. Mobilde iki parmakla yakınlaştırdığınızda ya da ekran klavyesi açıldığında visual viewport küçülür, layout viewport ise genellikle yerinde kalır. Masaüstünde yakınlaştırma yapılmadığı sürece ikisi neredeyse örtüşür.
Bu ayrım JavaScript tarafında da görünür: document.documentElement.clientWidth layout viewport'un genişliğini verirken window.visualViewport API'si görünen alanın boyutunu, kaydırma konumunu ve yakınlaştırma oranını raporlar. Ekran klavyesi açıldığında sabit konumlu bir alt çubuğu doğru yerde tutmak gibi işler bu API ile çözülür.
Meta viewport etiketi neden gerekli?
İlk akıllı telefon tarayıcıları, masaüstü için yapılmış sayfaları bozmamak adına layout viewport'u ekrandan çok daha geniş kabul edip (iOS Safari'de varsayılan 980 piksel) sayfayı küçülterek gösterdi. Bu davranış bugün de geçerlidir: head içinde viewport etiketi yoksa mobil için yazılmış media query'ler beklendiği gibi devreye girmez ve metinler okunamayacak kadar küçük görünür. Yerleşik kullanım şudur:
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-width layout viewport'u cihazın CSS piksel cinsinden genişliğine eşitler; initial-scale=1 sayfanın yakınlaştırma uygulanmadan açılmasını sağlar. Responsive tasarım mobilde bu etiket olmadan çalışmaz. Google, mobile-first dizine eklemede sayfanın mobil sürümünü esas aldığı için eksik bir etiket, sitenin Google'a ve kullanıcılara nasıl göründüğünü doğrudan etkiler.
Sık yapılan hatalar
- Yakınlaştırmayı kapatmak:
user-scalable=noveyamaximum-scale=1eklemek, az gören kullanıcıların metni büyütmesini engeller. Bu, WCAG'nin metnin yeniden boyutlandırılabilmesi beklentisiyle çelişir; bazı mobil tarayıcılar bu değerleri zaten yok sayar. - Sabit genişlik vermek:
width=1024gibi bir değer her cihaza aynı genişliği dayatır ve küçük ekranlarda yatay kaydırmaya yol açar. - Etiketi birden fazla kez eklemek: tema ve eklentiler kendi etiketlerini eklediğinde beklenmedik değerler devreye girebilir. Sayfada tek bir viewport etiketi olmalıdır.
- Tam ekran bölümlerde
100vhkullanmak: mobil tarayıcılarda adres çubuğu gizlenip göründükçe görünen yükseklik değişir.vhçoğu zaman araç çubukları gizliyken oluşan en büyük yüksekliğe göre hesaplandığından içeriğin alt kısmı ekranın dışında kalabilir.
Yeni yükseklik birimleri: svh, lvh, dvh
Son sorunu çözmek için CSS'e yeni viewport birimleri eklendi ve bugün tüm büyük tarayıcılarda destekleniyor:
| Birim | Neyi esas alır? | Tipik kullanım |
|---|---|---|
svh | Tarayıcı arayüzü tamamen açıkken kalan en küçük yükseklik | Hiçbir durumda taşmaması gereken giriş alanları |
lvh | Arayüz gizlendiğinde oluşan en büyük yükseklik | Arka plan görselleri |
dvh | O anki gerçek yükseklik; arayüz değiştikçe güncellenir | Tam ekran paneller, modal pencereler |
dvh kaydırma sırasında sürekli yeniden hesaplanabildiği için büyük düzen bloklarında göze batan sıçramalara ve gereksiz yerleşim hesaplarına neden olabilir. Çoğu durumda svh daha öngörülebilir bir varsayılandır; dvh gerçekten ekranı birebir doldurması gereken öğelere bırakılmalıdır.
Nasıl kontrol edilir?
En hızlı yol, sayfa kaynağında name="viewport" aramaktır. Tarayıcı geliştirici araçlarındaki cihaz simülasyonu etiketin etkisini farklı genişliklerde gösterir; Lighthouse da eksik ya da yakınlaştırmayı engelleyen etiketleri raporlar. Doruva'nın SEO Analiz Aracı da etiketin varlığını, cihaz genişliğini izleyip izlemediğini ve yakınlaştırmanın kapatılıp kapatılmadığını kontrol eder. Kavramların ayrıntılı açıklaması için MDN'in viewport kavramları sayfası iyi bir başvuru kaynağıdır.