Viewport Nedir? - Mobil, Php, Android, ios ve Teknoloji Bloğu

Viewport Nedir?

Gönderen: Kaan   Tarih: 2018-08-09 09:32 Kategori: Php-Html5-Css-jQuery-Mysql | Okundu: 1158 Onay sırasına at Düzenle Kopyası

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. 

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.



Yorumlar: