Responsive ayarının HAM maddesi META(viewport)!
- İbrahim Mesut Yılmaz
- 15 Şub 2024
- 2 dakikada okunur
viewport meta etiketi hayat kurtarır:) kısaca olayı şu webisteinizi tarayıcının anlayacağı şekilde responsive uyumlu hale getirmek.
Böylece css de yazacağınız @media kurallarıyla (ve viewport ayarını aşağıdaki gibi düzgün yaptığınızı var sayarak) web sitesinizi responsive uyumlu hale getirirsiniz.
Tarayıcıdaki görünür alanı(viewport) yani kullanıcının gördüğü alanını temsil eder . Bir çok meta etiketi vardır ancak konumuzla alakalı olan meta viewport etiketi için kabul görmüş global bir örnek yazalım.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ben 10 yıldan fazladır bunu kullanıyorum.. Buradan sırayla değinecek olursak name="viewport" diyerek görünür alanı temsil edeceğini söylüyoruz content bölümünde ise tüm ekranı alacağını ve ölçek olarak 1.0 değerini veriyoruz.
Eskiden tek tip ekran vardı genel genişlik pikseli olarak 980px kabul edilirdi ve tüm tasarımlar buna göre yapılırdı. Telefon tablet kullanımı ve Ekranların çok fazla çeşitliliği insanları farklı çözümler üretmeye zorladı. Bir dönem fontların büyüklüğüyle oynandı ama bu kimi ekranda büyük göründü kimi ekranda küçük göründü. telefondan zoom yapa yapa web sitesi gezdiğimi bilirim. benim gibi dinazorlarda o dönemi hatırlar:D Artık htmle viewport geldi css e @media geldi dertler bitti:) bu arada viewporttaki content ayarlarınız ile değişiklikler yaparak css de @media ayarınızdaki kuralların nasıl etkilendiğini görebilirsiniz burayı meraklısına söylüyorum..
Teknik olarak anladığım kadarıyla (daha iyi bilen varsa lütfen daha iyi aydınlatsın...) tüm tarayıcılar yaptığımız kodlamaları tarayıcı ekranına sığdırmaya çalışıyor yani yüzdelik olarak. Siz 980px bir site yaptınız ve viewport kullanmadız 320px lik bir ekrandan giriş yaptığınızda sizin 980px lik sitenizi 320px içine aynı oranda küçültüp sığdıracaktır. Bu yüzden mobilden zoom yaparak o minik kalan fontları ancak okuyabiliyordun. viewport kullandığımızda tarayıcının bu sığdırma politikasını devre dışı bırakıyor. Tüm oynar viewporta... SP yani sığdırma politikası devre dışı kaldığından, senin css de yazdığın @media ile ekran ekran hazırladığın tüm responsive doğru düzgün çalışır oluyor. (aslında yüzdelik olarak bir çalışma yaparsanız viewporta ihtiyacınız kalmaz tabi oda bir noktaya kadar.. örn: ibrahimmesutyilmaz.com viewport kaldırıp deneyebilirsiniz.)
Olmazsa olmazlarda en tepede kesinlikle meta etiketini <head> içinde kullanmalısın. Yoksa tüm hikaye başlamadan biter. Yüzüğü neden kartallarla götürmediler? sorusu gibi, o zaman kitap olurmuydu?
Bunlarda ilginizi Çekebilir
Parametre olarak minimum-scale, maximum-scale ve user-scalable var bunlar ile kullanıcıyı kısıtlayabilirsin.
minimum-scale ve maximum-scale yakınlaştırma ve uzaklaştırma değerleridir. kullanıcının ne kadar zoom yapacağını belirlemek için kullanılır.
user-scalable ise kullanıcının zoom yapabilirmi yapamazmı? onu söylüyosun yes/no dedinmi kullanıcıyı kısıtlamazsın yada kısıtlarsın...
son olarak meta viewport etiketini ekleyip responsive çalışmanızı yapmayı unutmayın:)
Hoşçakalın, kendinize iyi bakın:)
çok açıklayıcı bir yazı olmuş, ellerine sağlık
Elinize sağlık, konuyu güzel özetlemişsiniz.