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.


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

Ahmet Arslanoğlu 30/03/2020

Aslında Çok Yorum mesaj vs. yapmam ama bunu size iletmek istedim millet olarak okuma kültürümüz pek yok malum ve kargacık burgacık yazılar arasında boğuluyoruz bu öğrenmek istediğimiz bir şeyin makalesi bile olsa ama ; Sayfa Düzeniniz çok güzel insanı boğmuyor her ayrıntıya kadar okuma hissiyatı bırakıyor kutlarım sizi ve başarılarınız daim olsun iyi günler...
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

2843

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.