Viewport Kontrol Aracı
Viewport meta etiketi, mobil tarayıcıya sayfanın hangi genişlikte ele alınacağını söyler. Tek satırlık bir etikettir ama mobil deneyimin tamamını belirler: eksikse sayfa masaüstü genişliğinde varsayılıp küçültülerek gösterilir, yanlış yapılandırılmışsa yatay kaydırma oluşur, fazla kısıtlanmışsa az gören kullanıcılar sayfayı büyütemez. Bu araç etiketinizi bir bütün olarak değil, direktif direktif ayrıştırır ve her birinin ne anlama geldiğini söyler.
Viewport etiketi olmadan ne olur?
Mobil tarayıcılar, viewport etiketi bulunmayan sayfaları eski masaüstü siteleriyle uyumlu kalmak için yaklaşık 980 piksel genişliğinde varsayar ve ekrana sığdırmak için küçültür. Sonuç, ziyaretçinin uzaklaştırılmış bir masaüstü sayfası görmesidir: yazılar okunamayacak kadar ufak, bağlantılar parmakla isabet ettirilemeyecek kadar küçüktür. Google bu sayfayı mobil uyumsuz olarak değerlendirir; arama trafiğinin büyük kısmının mobilden geldiği düşünülürse bu doğrudan bir sıralama ve dönüşüm kaybıdır.
width=device-width neden şart?
Bu direktif sayfaya, kullanıldığı cihazın gerçek genişliğini temel almasını söyler. Duyarlı tasarımın tüm CSS medya sorguları bu genişliğe göre çalışır; direktif yoksa medya sorguları 980 piksele göre değerlendirilir ve mobil düzeniniz hiç devreye girmez. Sabit bir değer yazmak (örneğin width=1024) ise daha kötüsüdür: sayfa her cihazda o genişlikte varsayılır, dar ekranlarda yatay kaydırma çubuğu belirir ve içerik taşar.
Yakınlaştırmayı engellemek: en sık yapılan erişilebilirlik hatası
user-scalable=no ya da maximum-scale=1 eklemek, kullanıcının sayfayı iki parmakla büyütmesini engeller. Bu ayar çoğunlukla iyi niyetle konur — tasarımın bozulmasını ya da form alanlarına dokunulduğunda ekranın zıplamasını önlemek için. Ancak bedeli ağırdır: az gören kullanıcılar metni okuyabilmek için yakınlaştırmaya ihtiyaç duyar ve bu ayar onları sayfadan tamamen dışlar. WCAG 2.1 SC 1.4.4 en az iki kat büyütme imkânı ister; iyi uygulama beş kata kadar izin vermektir. Duyarlı ve yeterli yazı boyutuna sahip bir tasarımda bu kısıtlamaya zaten gerek kalmaz. Erişilebilirlik denetimlerinde doğrudan hata olarak raporlanan, kaldırılması en kolay maddelerden biridir.
initial-scale, minimum-scale, maximum-scale
initial-scale sayfanın açılışta hangi yakınlaştırma seviyesinde görüneceğini belirler; standart değer 1'dir ve sayfanın olduğu gibi, ölçeklenmeden gösterilmesi anlamına gelir. minimum-scale ve maximum-scale kullanıcının inebileceği ve çıkabileceği sınırları koyar. Bu ikisiyle oynamak genellikle gereksizdir; maximum-scale'i düşük bir değere sabitlemek ise yukarıda anlatılan erişilebilirlik sorununu doğurur. Pratik öneri şudur: initial-scale=1 yazın, diğer ikisini hiç tanımlamayın.
Çentikli ekranlar: viewport-fit=cover
Çentikli ya da yuvarlatılmış köşeli ekranlarda tarayıcı, varsayılan olarak içeriği güvenli alanın içinde tutar ve kenarlarda boşluk bırakır. viewport-fit=cover bu sınırı kaldırır ve tasarımın ekranın tamamına yayılmasına izin verir. Ancak bu ayarı tek başına eklemek risklidir: içerik çentiğin ya da ana ekran çubuğunun altında kalabilir. Doğru kullanım, cover ile birlikte CSS'te env(safe-area-inset-top) gibi güvenli alan değişkenlerini kullanarak kritik öğeleri korumaktır.
Sanal klavye ve interactive-widget
Mobilde bir form alanına dokunulduğunda açılan sanal klavye, görünür alanın yarısına yakınını kaplayabilir. interactive-widget direktifi, bu daralmanın CSS ve JavaScript'e nasıl yansıyacağını belirler: görünür alanın mı yoksa içerik alanının mı yeniden hesaplanacağını, ya da klavyenin içeriğin üzerine binip binmeyeceğini seçersiniz. Form ağırlıklı sayfalarda, klavye açılınca sabit konumlu düğmelerin yerinden oynamasını önlemek için işe yarar. Tanımlanmaması bir hata değildir; varsayılan davranış çoğu sayfa için yeterlidir.
Sorularla
Sıkça Sorulan Sorular
Doğru viewport etiketi nedir?
Çoğu site için tek doğru satır şudur: <meta name="viewport" content="width=device-width, initial-scale=1">. Bunun ötesindeki direktifler özel ihtiyaçlar içindir ve gerekmedikçe eklenmemelidir.
user-scalable=no kullanmak SEO'ya zarar verir mi?
Doğrudan bir sıralama cezası olduğuna dair bir açıklama yok; ancak erişilebilirlik denetimlerinde hata olarak raporlanır ve Lighthouse erişilebilirlik puanınızı düşürür. Asıl mesele ise kullanıcı tarafındadır: az gören ziyaretçiler sayfayı büyütemedikleri için okuyamaz ve terk eder. Duyarlı bir tasarımda bu ayara ihtiyaç yoktur.
Viewport etiketim var ama site mobilde bozuk görünüyor, neden?
Viewport etiketi ölçeklemenin yalnız başlangıç koşuludur; düzenin kendisi CSS ile kurulur. Etiket doğru olsa bile sabit piksel genişliği verilmiş kapsayıcılar, taşan tablolar, büyük görseller ya da eksik medya sorguları yatay kaydırmaya yol açar. Bu araç etiketi denetler; düzen taşmaları için sayfanın CSS'ine bakılmalıdır.
Birden çok viewport etiketi olması sorun mu?
Evet. Hangisinin uygulanacağı tarayıcıya kalır ve davranış öngörülemez hale gelir. Genellikle tema ile eklentinin ya da şablon ile bir bileşenin ayrı ayrı etiket basmasından kaynaklanır. Tek etiket bırakılmalıdır.
initial-scale ile width=device-width aynı şey değil mi?
Hayır, farklı işler yaparlar. width=device-width düzenin hangi genişliği temel alacağını, initial-scale ise sayfanın açılışta hangi yakınlaştırma seviyesinde gösterileceğini belirler. İkisini birlikte tanımlamak, bazı eski tarayıcılarda cihaz yönü değiştiğinde ortaya çıkan ölçekleme tutarsızlıklarını da önler.
viewport-fit=cover eklemeli miyim?
Yalnız tasarımınızın ekranın tamamına yayılmasını istiyorsanız. Bu ayarı eklerken CSS'te env(safe-area-inset-*) değişkenleriyle güvenli alanı korumak şarttır; aksi halde başlık, düğme gibi öğeler çentiğin ya da ana ekran çubuğunun altında kalabilir. İhtiyacınız yoksa eklemeyin.