Bir web sitesi masaüstünde kusursuz görünürken telefonda küçülmüş, okunmaz bir sayfaya dönüşüyorsa sorun çoğu zaman viewport meta etiketindedir. Bu küçük satır, tarayıcıya sayfayı cihazın ekranına göre nasıl ölçekleyeceğini söyler. Etiket yoksa mobil tarayıcılar sayfayı yaklaşık 980 piksel genişliğinde bir tuval gibi çizer ve ekrana sığacak şekilde küçültür. Sonuç, yakınlaştırmadan okunamayan bir sayfadır.
Temel etiket ve değerlerin anlamı
Çoğu site için yeterli olan satır şudur: meta name=”viewport” content=”width=device-width, initial-scale=1″. Bu satır head bölümüne yerleştirilir. width=device-width, sayfa genişliğinin cihazın gerçek ekran genişliğine eşitlenmesini sağlar. initial-scale=1 ise sayfa ilk açıldığında yakınlaştırma oranının yüzde yüz olmasını belirler. Bu iki değer birlikte kullanıldığında CSS medya sorguları da beklendiği gibi çalışır, çünkü tarayıcı gerçek cihaz genişliğini baz alır.
Kaçınılması gereken ayarlar
Bazı sitelerde user-scalable=no veya maximum-scale=1 ifadelerine rastlanır. Bunlar kullanıcının parmakla yakınlaştırmasını engeller. Görme zorluğu yaşayan ziyaretçiler için ciddi bir erişilebilirlik sorunu yaratır ve erişilebilirlik denetimlerinde hata olarak işaretlenir. Sabit bir genişlik tanımlamak da yaygın bir hatadır; örneğin width=1024 yazmak, küçük ekranlarda yatay kaydırmaya yol açar. Aynı şekilde sayfada iki ayrı viewport etiketi bulunması, hangisinin geçerli olacağı konusunda tutarsızlık doğurur. Tek ve sade bir etiket tercih edin.
Doğru çalıştığını nasıl test edersiniz?
İlk adım, tarayıcının geliştirici araçlarındaki cihaz simülasyonunu açıp farklı ekran boyutlarında sayfayı denemektir. Yatay kaydırma çubuğu çıkıyorsa genellikle sabit genişlikli bir görsel, tablo veya eleman vardır. Bu öğelere max-width:100% gibi esnek kurallar vermek çoğu zaman sorunu çözer. Ardından gerçek bir telefonda da kontrol yapın, çünkü simülasyon her davranışı birebir yansıtmaz. Arama motorlarının mobil uyumluluk değerlendirmeleri de bu etikete dayanır; metin okunabilir boyutta mı, dokunulacak öğeler birbirine fazla yakın mı gibi ölçütler ancak doğru ölçekleme ile sağlıklı sonuç verir.
Ek ayarlar ve güncel kullanım
Çentikli ekranlara sahip cihazlarda içeriğin kenarlara taşmaması için viewport-fit=cover değeri kullanılabilir, ancak bu durumda CSS tarafında güvenli alan boşluklarını da tanımlamanız gerekir. Klavye açıldığında yerleşimin nasıl değişeceğini belirleyen interactive-widget gibi yeni değerler de vardır; yine de bunlara yalnızca belirli bir ihtiyaç doğduğunda başvurun. Çoğu proje için temel iki değerli etiket yeterlidir.
Viewport etiketi tek satırlık bir ayar olsa da mobil deneyimin temelini oluşturur. Doğru yazın, erişilebilirliği kısıtlamayın ve her tasarım değişikliğinden sonra gerçek cihazlarda kontrol edin.