HTML'deki <meta name="viewport"> etiketi, mobil tarayıcılarda sayfanın düzenini kontrol etmek için kullanılır. Bu etiket ile geliştiriciler, sayfanın boyutlarını ve ölçeklendirmesini nasıl kontrol edeceğini tarayıcıya talimat verebilir.

Genel Kullanım:

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

Apple 2007 yılında iPhone'u piyasaya sürdüğünde, viewport meta etiketi adı verilen tescilli bir meta etiketi tanıttı. Bu etiketin amacı, web sayfalarının mobil tarayıcılara, web tarayıcısının sayfayı nasıl oluşturmasını istediklerini iletmeleri için bir yol sağlamaktı.

Bu meta etiket olmadan, iPhone'lar web sayfalarını 980 piksel genişliğinde bir pencere olarak işleyecek ve kullanıcının bu pencereyi yakınlaştırması veya uzaklaştırması gerekecekti.

Bu meta etiketi sayesinde, bir web sayfasını gerçek boyutunda görüntülemek ve ardından düzeni, artık hepimizin telefonlarımızda internette gezinirken görmeyi beklediğimiz türden web sayfaları sağlayacak şekilde uyarlamak mümkündür.

Öngörülebilir gelecekte, duyarlı olmasını ve küçük ekranlı cihazlarda iyi bir şekilde görüntülenmesini istediğiniz herhangi bir web sayfasının, Android ve giderek artan sayıda başka platform da desteklediği için bu meta etiketini kullanması gerekecektir.

Artık bildiğiniz gibi, viewport meta etiketi HTML'nin head etiketleri içine eklenir. Belirli bir genişliğe (örneğin piksel olarak belirtebiliriz) veya 2.0 (gerçek boyutun iki katı) gibi bir ölçeğe ayarlanabilir. İşte tarayıcıya gerçek boyutun iki katı (yüzde 200) olarak gösterilecek şekilde ayarlanmış bir viewport meta etiketi örneği:

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

<meta
    name="viewport"
    content="width=device-width, maximum-scale=3, minimum-scale=0.5"
/>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

İşte yaygın kullanılan bazı özellikleri:

width=device-width: Bu, görünüm penceresinin (viewport) genişliğini, cihaz bağımsız piksellerde ekranın genişliğiyle eşleşecek şekilde ayarlar.

initial-scale=1.0: Bu, sayfa tarayıcı tarafından ilk yüklendiğinde başlangıç yakınlaştırma seviyesini ayarlar.

maximum-scale=1.0: Kullanıcıların daha fazla yakınlaştırmasını önlemek için maksimum yakınlaştırma seviyesini sınırlar.

minimum-scale=1.0: Bu, minimum yakınlaştırma seviyesini ayarlar.

Bu etiket, mobil cihazlarda web sitelerinin doğru şekilde görüntülenmesini sağlamak için çok önemlidir.