Viewport Etiketinin Kullanımı
Viewport etiketi tüm meta etiketleri gibi HTML sayfasının head etiketleri arasına yazılır.
<!DOCTYPE html>
<html lang="tr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="windows-1254" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Karayel Tasarım Mobil Projesi</title>
</head>
<body>
<h1>Mobil Uygulama Anasayfası</h1>
<p>
Önemli Olan İçerik Bütünlüğü
</p>
</body>
</html>
Bu şekilde oluşturulan viewport etiketi artık herhangi bir tarayıcı tarafından okunduğu anda ekran genişliğini tarayıcıya iletecek ve aynı zamanda içerik skalasının korunması gerektiğini bildirecektir. Elbette ki bu etiket tek başına yeterli değildir. Daha sonraki bölümlerde bahsedeceğimiz Grid Sistemi ve Medya Query'ler olmadan tek başına mobil deneyimini gerçekleştiremez. Fakat eğer mobil bir uygulama yazılmak isteniyorsa en temel kavram viewport'tur. Bu etiket yukarıda verilen fonksiyonlar dışında bize ek özellikler de sunar.
Viewport Konfigürasyonu
Genelde Viewport etiketinin içerisine standardın dışında çok fazla fonksiyon eklenmez fakat ihtiyaç dahilinde çeşitli eklentiler yapılabilir.
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height">
Tıpkı ekran genişliğini yakaladığı gibi ekran yüksekliğini de yakalar. Mobil tasarımda önem teşkil eden esas nokta yükseklikten ziyade genişlik olduğundan dolayı çok sık ihtiyaç duyulmaz.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
Bu fonksiyon genele vurulduğunda sıklıkla kullanılmaktadır. Kullanıcının web sayfası üzerinde pan&pinch yöntemi ile zoom yapıp yapamayacağına karar verir. Eğer yazmasanız varsayılan değer olarak evet alınır ve bu işleme izin verir. Amacımız kullanıcıyı olabildiğince zoom yapmaktan kurtarmak olduğu için sıklıkla kullanılır.
Örnek Viewport Uygulaması
Viewport'u uygulama sırasında görmek için küçük bir JavaScript uygulaması yapacağız. Bu uygulama sayesinde tarayıcı penceremizi küçültüp sayfayı yenilediğimizde Viewport'un o andaki genişliğini piksel cinsinden göreceğiz.
Öncelikle Visual Studio'da CTRL+N tuş kombinasyonuyla yeni bir HTML dokümanı oluşturuyoruz.
RESİM
Daha sonra ise aşağıdaki kodu dokümanın içerisine yazıp kaydediyoruz.
<!DOCTYPE html>
<html lang="tr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="windows-1254" />
<title>Karayel Tasarım Mobil Projesi</title>
</head>
<body>
<script type="text/javascript">
var viewportGenislik;
var viewportYukseklik;
if (typeof window.innerWidth != 'undefined') {
viewportGenislik = window.innerWidth,
viewportYukseklik = window.innerHeight
}
else {
viewportGenislik = document.getElementsByTagName('body')[0].clientWidth,
viewportYukseklik = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Viewport genişliği: ' + viewportGenislik + 'x' + viewportYukseklik + '</p>');
</script>
</body>
</html>
Kodumuzu herhangi bir tarayıcıda açtığınız zaman pencerenizin o anki boyutu ne ise sayfanın içerisinde bu değeri piksel cinsinden göreceğiz. Şimdi tarayıcı pencerenizi yanlardan küçültün ve sayfayı yenileyin. Viewport'unuzun yakaladığı yeni değeri göreceksiniz.
RESİM
JavaScript ile ekran genişliğini yakaladığımız bu uygulamada kodların üzerinden geçelim:
var viewportGenislik;
var viewportYukseklik;
Bu kısım ile iki değişken oluşturuyoruz. Bu değişkenleri yükseklik ve genişlik değerlerini tutmak için kullanıyoruz.
if (typeof window.innerWidth != 'undefined') {
viewportGenislik = window.innerWidth,
viewportYukseklik = window.innerHeight
}
else {
viewportGenislik = document.getElementsByTagName('body')[0].clientWidth,
viewportYukseklik = document.getElementsByTagName('body')[0].clientHeight
}
Burada ise karşımıza çıkabilecek iki senaryoyu değerlendirerek bir mantıksal sınama yapıyoruz. İlk senaryo, yani if bloğumuz window.innerWidth (pencere iç genişliği)'in boş veya tanımsız dönmemesi durumunu kontrol ediyor. Bu durum, viewport'un tarayıcı tarafından desteklendiğini ve okunabilir durumda olduğunu gösterir. Bu durumda dönen değerler değişkenlerin içine atanır.
İkinci senaryo ise çok nadir de olsa tarayıcının çok eski olması ve viewport etiketinin desteklenmiyor olmasıdır. Bu durumda ise else bloğumuz devreye girer HTMLetiketini dokümanın içerisinden bularak genişliğini değişkenlerimizin içine atar.
document.write('<p>Viewport genişliği: ' + viewportGenislik + 'x' + viewportYukseklik + '</p>');
Son kısımda ise string birleştirme yöntemi ile değişenlerimiz HTML olarak sayfanın içerisine yazdırılır.
Viewport'un temel mantığını düşündüğümüzde yukarıdaki kodun else bloğunun çalışmasının çok bir mantığı yoktur. Hali hazırdaki tarayıcılar ister platform ister mobil olsun, zaten viewport etiketini desteklemektedir. Yazdığımız JavaScript viewport ile ekran genişliğini almak için değil, viewport'un mantığını kavratmak amacıyla yazılmıştır. Normal şartlar altında viewport etiketini sayfaya dahil ettiğiniz andan itibaren tüm tarayıcılar ekran genişliğine göre hareket edileceğini anlar. Bu durumda önemli olan ise daha sonraki bölümlerde bahsi geçecek olan Media Query'lerdir.