Menü Kapat

viewport meta etiketi ve esnek (responsive) tasarım

Esnek tasarımın olmazsa olmazı viewport meta etiketi. Bu etiket tarayıcıya, ekranı hangi genişlikte görüntüleyeceğini bildirir. Eğer bu etiketle bir değer belirtilmezse tarayıcı ekranı, bulunduğu cihazın varsayılan değeriyle görüntüler. Bu genellikle çok küçük bir sayfa görüntüsü anlamına gelir.

viewport meta etiketinin en yaygın kullanımı aşağıdaki gibidir:

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

Yukarıdaki ifade tarayıcıya, “ekranı tam olarak cihazın ekranın genişliğinde kabul et ve sayfayı da bu genişlikte görüntüle” demektedir. Böylece sayfa, mesela iPhone 7 ekranında görüntüleniyorsa 375 piksek genişliğinde olacaktır. iPad dikey konumdayken görüntülendiğinde ise 768 piksel genişliğinde.

viewport meta etiketinin başka değişkenleri de var, ancak yukarıdaki hali çoğu durumda yeterli oluyor.

Kaynak: css-tricks.com/probably-use-initial-scale1

Bu yazılar da ilginizi çekebilir

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir