Viewport Nedir?
Her türlü cihaza uygun web siteleri oluşturma ihtiyacı sonucu ortaya çıkan kavramlardan biri de viewport'tur.
Kullanıcının cihazında web sayfamızın kapladığı alana viewport denmektedir. Tabi bu alan her cihazda farklı boyutlarda olabilmektedir. Hatta tarayıcı pencerenizi daraltıp genişlettiğinizde, viewport alanı da değişmektedir.
Viewport kavramı, Html5 ile gelen yeniliklerden biri olup, basit bir meta etiketi kullanılarak viewport ile ilgili ölçeklendirme ve yönlendirme gibi temel ayarlamaları yapabiliriz.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Genellikle yukarıdaki şekilde kullanılır.
width=device-width kısmı ölçeklemenin kullanıcının ekranına göre yapılacağını belirtir.
initial-scale=1 kısmı ise ölçekleme (zoom) miktarını belirler. 1 değeri verilerek sayfamızın ekranı kaplaması gerektiği belirtilmiştir.
Viewport kullandığınızda sayfanızın nasıl etilendiğini görmek için küçük ekranlı cihazlar ile ziyaret ederek inceleyebilirsiniz.
Tabi mobil uyumlu (responsive) web siteleri elde etmek için viewport etiketini kullanmak yeterli olmayacaktır. Sitemizdeki diğer CSS konularını da inceleyebilirsiniz.
Web sitemiz kullanıcıların ekranlarında açıldığında yatay kaydırma çubuğu çıkmamalıdır. Bu ziyaretçilerin hoşuna gitmeyecektir çünkü sayfalarımızın okunması zorlaşacak, kullanışsız sayfalar ortaya çıkmış olacaktır.
Viewport kullanımı ile yatay kardırma çubuklarına önlem almamız mümkündür.
viewport nedir, meta viewport ne işe yarar, meta viewport kullanımı ve anlamı, yatay kaydırma çubuklarını engelleme
KONU İLE İLGİLİ ÖRNEKLER
Bu konu ile ilgili örnek bulunmamaktadır.
12482 kez okundu.