Görünüm alanı meta
HTML'deki viewport meta etiketinin CSS ile ilişkisini öğrenirsin.
Duyarlı tasarım nedir?
Duyarlı tasarım (responsive design), bir sayfanın telefon, tablet ve masaüstünde de okunabilir kalmasıdır. Aynı HTML korunur; yalnızca CSS stilleri ekran genişliğine göre değişir.
Bunun için iki parça gerekir: görünüm alanını ayarlayan <meta name="viewport"> etiketi ve ekran genişliğine göre stilleri değiştiren @media blokları. Bu derste önce meta etiketine bakıyoruz.
viewport meta etiketi
Görünüm alanını ayarlayan etiket HTML'in <head> bölümüne konur:
<meta name="viewport" content="width=device-width, initial-scale=1">Bu satır tarayıcıya şöyle der: sayfa genişliğini cihazın gerçek piksel genişliğine eşitle ve yakınlaştırmayı %100'de başlat. Bu olmadan telefon, sayfayı yaklaşık 980 piksel genişlikte sanır ve daraltarak gösterir; sonuç telefonda okunamaz.
İki kritik değer
content özniteliğinde iki değer önemlidir:
- width=device-width: sayfa genişliğini cihazın gerçek piksel genişliğine eşitler.
- initial-scale=1: yakınlaştırmayı %100'de başlatır, varsayılan yakınlaştırma yapılmaz.
Bu ikisi birlikte telefonda okunabilir bir başlangıç sağlar. Tek başına width=device-width de çoğu durumda yeter; ancak initial-scale=1 eklemek Android cihazlarda tutarlılık sağlar.
Kendini test et
-
Telefonda sayfa çok küçük görünüyor, ne eksik?
- Sayfaya viewport meta etiketi eklenmemiş
- CSS dosyası CDN yerine yerel olarak yüklenmiş
- HTML dosyasında lang özniteliği yok
- Renkler hex yerine rgb olarak yazılmış
Cevabı göster
Sayfaya viewport meta etiketi eklenmemiş — Doğru. viewport meta etiketi olmadan tarayıcı, sayfayı masaüstü genişliğinde gösterip küçültür.
-
viewport meta etiketini tamamla
<meta name="viewport" content="____">Cevabı göster
<meta name="viewport" content="width=device-width"> -
initial-scale=1 ne yapar?
- Sayfayı %50 küçültür
- Yatay kaydırmayı kapatır
- Yakınlaştırmayı %100'de başlatır
- Cihaz piksel yoğunluğunu iki katına çıkarır
Cevabı göster
Yakınlaştırmayı %100'de başlatır — Doğru. initial-scale=1 yakınlaştırmayı %100'de başlatır; varsayılan bir yakınlaştırma uygulamaz.
-
Terimleri eşleştir
- viewport
- Görünüm alanı
- device-width
- Cihazın gerçek genişliği
- initial-scale
- Başlangıç yakınlaştırması
- width=device-width
- Sayfayı cihaza eşitle