Kodcu Murat Youtube Kanalına Abone Olmayı Unutma

Meta Viewport Elementinin Özellikleri Ve Kullanımı

Mobil cihazlardan responsible tasarımına uyumlu olmayan sitelere erişimsağlandığında sayfayı büyütüp küçültme yöntemiyle erişmek zorunda kaldığımızı herkes bilir. Bu makalemizde responsible tasarımına giirş için kullanılacak viewport metasından bahsedeceğiz.

Günümüzde artık popüler sayfaların çoğunluğu responsible tasarımını uygulamakta tabletten girildiğinde farklı gözükmesi veya cep telefonundan girilince boyut olarak farklı gözükmesini istediğiniz durumlarda css tarafından @media query’si kullanılmalıdır ilerleyen günlerde @media query’sinden detaylı şekilde bahsedilecektir.

Meta viewport elementinin bazı özellikleri aşağıda listelenmiştir.

  • width: Piksel olarak verilen viewport genişliği. Değer olarak device-width ile cihazın ekran genişliği de verilebilir.
  • height: Piksel olarak verilen viewport yüksekliği. Değer olarak device-height ile cihazın ekran yüksekliğide verilebilir.
  • initial-scale: Sayfayı ilk gösterilirken ne kadar ölçekli(scale) olarak verileceği. Örneğin 1.0 değeri verilirse başlangıç görüntüsü ölçeklenmeden gösterilir. 0 ile 10.0 arası bir değer olabilir.
  • minimum-scale: Kullanıcının en çok yapabileceği zoom out(küçültme) oranı.
  • maximum-scale: Kullanıcının en çok yapabileceği zoom in(büyütme) oranı.
  • user-scarable: Kullanıcının ölçekleme veya zoom yapıp yapamayacağını vermek için kullanılır. yes veya no değerini alır ve varsayılan olarak yes değerini alır.

Şimdi ise yukarıda tanımladığımız viewport metasının özelliklerinin örnek kullanımı için alttaki satıra gözatınız.

5/5 - (1 vote)