HTML Konuları

Viewport Meta Etiketi

28/11/2021

Tarayıcıdaki görüş alanı (viewport) penceredeki web içeriğinin görüldüğü alandır.

Genellikle web sayfalarının işlendiği ekranlar içeriğin tamamını görüntüleyemez, bu sebeple tarayıcılar kaydırma çubuğu (scroll bar) ile içeriğin tamamına ulaşmamıza yardımcı olur.

Viewport Meta Tag

*Viewport eklenmemiş sayfanın mobil ekran görünümü

Dar ekran genişliğine sahip cihazlarda (mobil telefonlar, tabletler) tüm sayfa içeriği sıkıştırılarak gösterilir. Örnek olarak 500px genişliğe sahip bir mobil cihazda 900px içeriğe sahip bir sayfa yüklenirse, mobil ekranda içerik sıkışık görünür. Bu nedenle kullanıcılar içeriği incelemek için ekranı yakınlaştırmak zorunda kalırlar.

Bu görünüm, mobil cihazlar için optimize edilmemiş siteleri dar genişlikteki cihazlarlarda görüntüleme yoludur. Sayfaların mobil için optimize edilmemiş olması bu sorunun sebebidir.

Viewport Meta Etiketi Oluşumu

Yukarıdaki bahsedilen mekanizma dar ekranlar (mobil telefonlar, tabletler) için tabii ki kullanışlı bir yapı değildir.

Apple bu duruma karşılık web geliştiricileri için IOS Safari’de kullanılacak viewport meta etiketini geliştirdi. Hatta günümüzde birçok mobil tarayıcı da bu etiketi aktif olarak kullanıyor.

Viewport Temelleri

Web sitelerinde viewport kullanımı genellikle aşağıdaki gibidir. HTML yapısında <head></head> etiketinin içerisinde üst konumda yer alır.

<meta name="viewport" content="width=device-width, initial-scale=1">

Meta etiketi üzerinde width özelliği görüş alanının boyutunu kontrol eder. Burası spesifik olarak width=500 gibi bir piksel sayısı da olabilir veya ekran genişliğinin %100’üne denk gelen device-with özelliği de olabilir.

initial-scale özelliği ilk yükleme anında yakınlaştırma seviyesini kontrol eder.

initial-scale=0

initial-scale=1

initial-scale=2

maximum-scale, minimum-scale ve user-scalable özellikleri ise kullanıcının sayfa içerisinde ne kadar zoom yapabileceğini kontrol eder.

Kullanıcıların ekran ölçeği ile oynamalarını istemiyorsanız user-scalable=no özelliğini kullanabilirsiniz.

Not: user-scalable=no kullanımı görme bozukluğu olan kullanıcılar için erişilebilirlik sorunu oluşturabilir.

Viewport Genişliği ve Ekran Genişliği

Meta etiketi içerisinde width alanı spesifik bir sayı ile belirtilmesi mümkün.

Örnek:

<meta name="viewport" content="width=500, initial-scale=1">

Aslında bu yapı görüntülenen alan minimum 500 piksele ihtiyaç duyuyorsa kullanılmalıdır. Ancak ekran genişliği 500 pikselden fazla ise tarayıcı içeriği ekrana sığdırmak için initial-scale=1 özelliği ile genişletecektir.

Yakınlaştırma Seviyesi

maximum-scale ve minimum-scale ile kullanıcıların ekran üzerindeki yakınlaştırma yeterlilikleri kısıtlanabilir. Bu özelliklerin değer aralıkları 0 ile 10.0 arasındadır, minimum-scale için varsayılan değer 0.25 iken maximum-scale için varsayılan değer 5.0’dır.