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

Sıradaki ders: Media query temelleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler