Responsive Web Tasarım viewport Nedir?

Bir web sitesinin görüntüleme alanı, bir kullanıcının görüntülediği cihaz için web sayfasının genişliğini kontrol eder. Tabi bu alan her cihazda farklı boyutlarda olabilmektedir. Hatta tarayıcı pencerenizi daraltıp genişlettiğinizde, viewport alanı da değişmektedir. Web sayfasının görünüm alanı kullanılan cihaza göre değişir. Örneğin, bir cep telefonun görünüm alanı masaüstü bilgisayarın görünüm alanından küçük olacaktır.

Device(Cihaz), browser(tarayıcı), viewport(görüntü alanı)

Konunun daha ilerisine gitmeden terimleri tanımlamamız gerekiyor:

• Device :Kullanılan donanım: akıllı telefon, tablet, pc veya dizüstü bilgisayar
• Browser :Çalışan yazılım: Firefox, Google Chrome, Safari, Internet Explorer
• Viewport :Tarayıcıda, aslında web sayfasını görüntüleyen bölge

Tabletler ve cep telefonlarından önce, web sayfaları sadece bilgisayar ekranları için tasarlanmıştı ve web sayfalarının statik bir tasarıma ve sabit bir boyuta sahip olması yaygındı.

Artık, Tabletleri ve cep telefonlarını kullanarak internette dolaşmaya başladığımızda, sabit boyutlu web sayfaları, görüntü alanına sığmayacak kadar büyüktü. Bunu düzeltmek için, bu cihazlardaki tarayıcılar, tüm web sayfasını ekrana sığacak şekilde küçültür.

Bu mükemmel değildi! Ama hızlı bir düzeltmedir. Responsive olmayan sitelerde ekrana göre küçülen bir site ve zoom özelliğiyle siteleri zor ve zahmetli bir şekilde gezinme olacaktır.

Aşağıdaki çarpılı resimde olduğu gibi siteniz Responsive tasarıma uygun değilse siteniz ekrana göre ufalacaktır ve ziyaretçilerinizi birkaç dakikalığına sıkıcı bir şekilde websiteniz sıkışık düzende küçülme olacak ve yazıları okuyabilmek için zoom yapmaya mahkum edeceksiniz. Buda kullanıcılar sitenizden sıkılarak ayrılmalar getirir. Eğer siteniz Responsive tasarıma uygunsa viewport etiketini ekleyerek tarayıcılar o zaman sizin siteniz Responsive siteye uygun olduğunu anlayarak küçültme ve sıkıştırma işlemi yapmayacaktır.

Web sitenizin Viewport'u Nasıl Yapılandırılır?

Bir mobil görüntü alanını yapılandırmak için tek yapmanız gereken, mobil uyumlu olan tüm web sayfalarına bir meta viewport etiketi eklemektir.

Bunu yapmak için, aşağıdaki HTML kodlarını kopyalayın ve sitenizin HEAD etiketi alanına yapıştırın.

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

Çoğu durumda, bu viewport etiketini HEAD alanına yerleştirmek, tüm site genelinde görüntülemenin tüm websitenizi daha da mobil hale getirmesini sağlar.

Bir <meta> viewport öğesi, sayfanın boyutlarını ve ölçeklemesini nasıl kontrol edeceğinize ilişkin tarayıcı talimatlarını verir.

width=device-width: Bölüm (cihaza bağlı olarak değişir) cihazın ekran genişliği takip sayfanın genişliğini ayarlar.

initial-scale=1.0: Bölüm Sayfa ilk tarayıcı tarafından yüklenen ilk yakınlaştırma düzeyini ayarlar.

Responsive Web Tasarım Derslerine buradan ulaşabilirsiniz…