Viewport, meta tag olarak veya css özelliği olarak kullanılabilmektedir. Bu yazımda meta viewport hakkında bilgi vermekteyim. Amacı mobil tarayıcılarda tasarım düzenini sağlamaktır. Web sayfanızı oluşturan bir tasarımın genişlik ve yükseklik değerini mobil tarayıcıya bildirmek, web sitenizin mobil tarayıcılarda aynı görünmesini sağlamak veya scalable (ölçeklendirme) ayarları yapabilirsiniz.
Tüm meta etiketlerinde olduğu gibi viewport meta etiketi de sayfamızın head etiketi içerisinde kullanılmalıdır. Genel kullanım şekli aşağıdaki gibidir.
|
<head>
<title>Sayfa Başlığı</title>
<meta name="viewport" content="..." />
</head>
|
Yine tüm meta etiketlerinde olduğu gibi viewport meta etiketinde yapacağımız tanımlamalar “content” parametresi içinde yapılmaktadır. Content parametresi içerisinde kullanabileceğimiz birçok viewport parametresi mevcuttur. Bu parametrelerin alabileceği değerler ve işlevler şunlardır;
[table “” not found /]
Şimdi tablomuzdaki parametreleri kullanarak, örnek viewport meta etiklerini oluşturalım…
Width
|
<meta name="viewport" content="width=600" />
<meta name="viewport" content="width=device-width" />
|
1. satırda web sitemizin genişliğinin 600 pixel olduğunu belirtiyoruz. 2. satırda ise tarayıcı genişliğini web sitemizin genişliği olarak kabul etmesini sağlıyoruz.
Height
|
<meta name="viewport" content="height=1250" />
<meta name="viewport" content="height=device-height" />
|
1. satırda web sitemizin yüksekliğinin 1250 pixel olduğunu belirtiyoruz. 2. satırda ise tarayıcı yüksekliğini web sitemizin yüksekliği olarak kabul etmesini sağlıyoruz.
Initial-Scale
|
<meta name="viewport" content="initial-scale=2.0" />
|
Sitemiz yüklendiğinde sitemiz 2 kat yakınlaştırılmış olarak açılacaktır.
Minimum-Scale
|
<meta name="viewport" content="minimum-scale=4.0" />
|
Kullanıcının yapabileceği maksimum zoom out değerini 4.0 kat olarak tanımladık.
Maximum-Scale
|
<meta name="viewport" content="maximum-scale=5.3" />
|
Kullanıcının yapabileceği maksimum zoom in değerini 5.3 kat olarak tanımladık.
User-Scalable
|
<meta name="viewport" content="user-scalable=yes" />
<meta name="viewport" content="user-scalable=no" />
|
1. satırda kullanıcının web sitesinde zoom yapabileceğini, 2. satırda ki örnekte ise yapamayacağını belirtiyoruz.
NOT “user-scalable” pasif durumdayken “minimum-scale” ve “maximum-scale” özellikleri işlevlerini yitirir. Bu yüzden “user-scalable” pasif durumdayken “minimum-scale” ve “maximum-scale” kullanılmaması daha yararlı olucaktır. Ayrıca “user-clable” parametresinde “yes” değerinin yerine “true” veya “1” değeri, “no” değerinin yerine ise “false” veya “0” değeri de kullanılabilir.
Target-DensityDpi
|
<meta name="viewport" content="target-densityDpi=high-dpi" />
|
NOT Anroid işletim sisteminin default tarayıcısında “target-densityDpi” parametresi daha fazla önem arzetmektedir.
Tek meta viewport etiketinde birden fazla parametreyi virgüller ile ayırarak kullanabilirsiniz.
|
<meta name="viewport" content="width=600, height=device-height, user-scalable=no" />
|
Kaynak: http://www.emircanok.com.tr/