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:

meta viewport

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.

meta viewport

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.


Ç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…

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

1102

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.