avatar

Meta Viewport
Responsive site yazarken meta viewport etiketini neden, nasıl kullanıyoruz?

13/07/2014
Hakan Özakar

Responsive bir site yazacaksak işe direkt <meta name="viewport" content="width=device-width, initial-scale=1" /> yazarak başlarız. Besmele gibi bir şey yani. Peki neden? Ne iş yapar bu viewport?

Nedir bu pixel (piksel) dedikleri?

Biraz kafa karıştırarak başlayalım. Aslında tek çeşit pixel yoktur. Nasıl mı? CSS pixeli ve cihaz pixeli farklı değerlerdir. Çok da korkulacak bir konu değil. İkisini de tanıyoruz aslında... Biraz açalım:

CSS'de pixel:

CSS pixeli, deklerasyonumuzu yaparken (CSS dosyasında ya da style özelliğinde) belirttiğimiz değerdir. Mesela, "width: 240px;" ya da "height: 180px;" gibi...

Bunlar soyut değerlerdir. Örneğin kullanıcı zoom yaptığında bunların boyutları değişir.

Cihaz'da pixel:

Cihaz pixeli, kullanmakta olduğunuz cihazın ekranındaki pixel sayısıdır. Fiziksel bir değerdir. Cihazınızın ekranına bağlı olarak kesin ve değişmez bir miktardadır.

Farklı cihazlarda farklı pixel değerleri ile çalışmak durumundayız.

Peki ne yapacağız?

Yeterince kafa karışıklığı yarattıysam sadede geleyim. Her zaman CSS pixel'i ile çalışacağız.

Viewport

Viewport (görüntüleme alanı) cihazımızdaki görüntüleme alanı olarak tanımlanabilir. <html> elementinin genişliği viewporta göre hesaplanır. Masaüstü bilgisayarlarda bu, tarayıcının genişliğine eşittir.

Eğer zoom yaparsanız, CSS pixellerini genişletmiş olursunuz. Bu durum ekranınıza daha az pixelin sığması anlamına gelecektir. Başka bir deyişle, viewportunuz küçülür.

Mobil cihazlarda ise işler biraz daha karışık yürümek durumundadır.

Mobil tarayıcılar her siteyi, site mobil için optimize edilmiş olmasa dahi doğru yorumlamalıdır. Örneğin mobil cihaz dikey olduğunda (viewportunuz dar ise) birçok site okunamaz derecede sıkıştırılır.

Bu nedenlerle mobil tarayıcı üreticileri, kuralları değiştirdiler.

Genellikle viewport (tarayıcıya bağlı olarak) 768 - 1024px genişliğindedir. En genel kullanım 980px'tir. Buna layout  (bu terimin Türkçesini bir türlü bulamadım, belki "düzenlenebilir - kullanılabilir" şeklinde çevirebiliriz?) viewport denir.

Responsive (esnek) tasarım, layout viewportu cihazın genişliğine göre düzenlemekten ibarettir.

Ancak aşikardır ki bu değerler mobil cihazların ekranlarının görüntüleme alanından büyüktür. Bu nedenle görüntülenebilir alanı tanımlayabilecek ayrı bir viewporta da ihtiyacımız var. Bu viewporta visual viewport diyoruz.

Sonuç olarak, masaüstü viewportunu mobil cihaza tercüme ettiğimizde iki parçada inceleyebiliyoruz:

  • Layout viewport,
  • Visual viewport

Ama aslında mobil cihazlarda, masaüstü bilgisayarlarda bir karşılığı olmayan bir viewport ile çalışmalıyız:

  • Ideal viewport

Ideal viewport

Mobil cihazlarda sitemizi görüntülemek için en uygun viewport genişliğini seçmek isteriz. Öyle ki, ziyaretçiler metinleri rahatça okuyabilsin, zoom yapmaya gerek kalmasın.

Ideal viewport boyutu cihazdan cihaza değişkenlik gösterir.

Meta Viewport

Responsive bir tasarım oluşturabilmek için layout viewportumuzun boyutlarını ideal viewporta eşitlemeliyiz. Bunun için:

<meta name="viewport" content="width=device-width" />

Meta viewport etiketi layout viewportunuzun genişliğini istediğiniz boyuta ayarlayabilmenizi sağlar. Genişliği pixel cinsinden verebileceğiniz gibi (width=360px) "device-width" anahtar kelimesini kullanarak ideal viewport boyutunu da seçebilirsiniz.

ideal viewport boyutunu belirlemek için ayrıca "initial-scale=1" değeri de kullanılabilir.

<meta name="viewport" content="initial-scale=1" />

Aslında "initial-scale" değeri başlangıçtaki zoom miktarını belirlemek için kullanılır (1 = 100%). Elbette bu değer ideal viewporta göre oranlama yaptığından "initial-scale=1" verildiğinde layout viewport boyutlarını da ideal viewport ile eşdeğer yapar.

Sonuç olarak aynı işlevi görmek için iki ayrı yöntemimiz var. Garip. Bunların hepsi Apple'ın halt yemesi işte.

İşleri biraz daha karıştıralım:

<meta name="viewport" content="width=360, initial-scale=1" />

Tarayıcıya küfür etsek daha iyi aslında. Bir yandan viewport 360 pixel olsun diyoruz, bir yandan ideal genişlikte olsun diyoruz. Böyle durumlarda tarayıcı büyük olan değeri alır, diğerini ihmal eder.

Başka bir deyişle tarayıcıya "viewport boyutu 360px ve ideal genişlikten hangisi büyükse o olsun" demiş oluyoruz. Cihazın konumu (dikey - yatay) değişirse değerler yeniden hesaplanır.

Sonuç olarak, aslında viewportun genişliği en az 360px olsun demiş olduk. Bir halta yaradı mı? Hayır...

Safari'nin hatası

Safari her sakallıyı dedesi zanneder. Başka bir deyişle, <meta name="viewport" content="width=device-width" /> kullanıldığında Safari, cihazın dikey genişliğini 320px (iphone) ya da 768px (ipad) kabul eder. Bu her zaman doğru değerleri alamayacağınız anlamına gelir. Bu sebeple Safari tarayıcılarda <meta name="viewport" content="initial-scale=1" /> tercih etmeliyiz.

IE10 hatası

Safari'nin aksine IE10, <meta name="viewport" content="initial-scale=1" /> kullanıldığında hata yapabilmektedir. Bu nedenle IE10 tarayıcıda <meta name="viewport" content="width=device-width" /> tercih etmeliyiz.

Sonuç:

Tüm tarayıcılarda doğru değerlere ulaşmak için en doğru kullanım:

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

 

 

Yorumlar Yorum Yap

  • Mehmet

    Hocam eline sağlık çok güzel anlatmışsın :)

    Mehmet 25/04/2015 14:31
  • Selçuk

    Çok güzel anlatmışsınız, emeğinize sağlık gerçekten bu yüzden teşekkür mahiyetinde yazma gereği duydum.

    Selçuk 04/03/2015 03:25