Viewport Meta Etiketi
viewport meta etiketini ekleyin ve duyarlı yerleşimlerin mobil cihazlarda doğru çalışması için neden gerekli olduğunu öğrenin.
Viewport Meta Etiketi, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Viewport Meta Etiketi Neden Kullanılır
Viewport meta etiketi olmadan mobil tarayıcılar sayfayı masaüstü genişliğinde (çoğunlukla 980px) oluşturur ve sığdırmak için uzaklaştırır. Bu, metnin çok küçük görünmesine ve düzenlerin bozulmasına neden olur. Meta etiketi, tarayıcıya cihazın gerçek genişliğini kullanmasını söyler.
Etiket
Bunu her sayfanın <head> bölümüne ekleyin. Herhangi bir duyarlı tasarımın doğru çalışması için gereklidir.
<meta name="viewport" content="width=device-width, initial-scale=1.0">width=device-width
width=device-width, viewport genişliğini cihazın CSS pikselleri cinsinden ekran genişliğine ayarlar. 390px genişliğindeki bir iPhone 14'te viewport, 980px yerine 390px olur.
initial-scale=1.0
initial-scale=1.0, sayfa ilk yüklendiğinde yakınlaştırma düzeyini 1 olarak ayarlar. Bu olmadan bazı tarayıcılar yine de bir yakınlaştırma katsayısı uygulayabilir. device-width ile birlikte kullanıldığında gerçek 1:1 CSS pikseli-cihaz pikseli oranını sağlar.
CSS Pikselleri ve Fiziksel Pikseller
Yüksek DPI (Retina) ekranların 1'den büyük bir cihaz pikseli oranı (DPR) vardır. 390px genişliğindeki bir iPhone 14'te 1170 fiziksel piksel bulunur (DPR = 3). CSS pikselleri, fiziksel pikselleri soyutlar — DPR ne olursa olsun CSS'niz CSS pikselleriyle çalışmaya devam eder.
user-scalable=no Kullanmayın
Bazı geliştiriciler, iki parmakla yakınlaştırmayı devre dışı bırakmak için user-scalable=no ekler. Bunu yapmayın. Görme engeli olan kullanıcıların içeriği okumak için yakınlaştırmasını engeller ve WCAG başarı ölçütü 1.4.4'ü karşılamaz.
Viewport Birimleri: vw ve vh
1vw = viewport genişliğinin %1'i. 1vh = viewport yüksekliğinin %1'i. 100vw ve 100vh, viewportun tamamını doldurur. Bunları öne çıkan bölümler ve tam ekran düzenleri için kullanın.
.hero {
width: 100vw;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}dvh — Dinamik Viewport Yüksekliği
Mobil cihazlarda 100vh, tarayıcı arayüzünü (adres çubuğunu) de içerir; bu da içeriğin kesilmesine neden olabilir. Daha yeni 100dvh (dinamik viewport yüksekliği), görünür tarayıcı arayüzüne göre ayarlanır. fallback kullanın.
.full-screen {
min-height: 100vh; /* fallback */
min-height: 100dvh; /* modern browsers */
}DevTools'ta viewport
Chrome DevTools'ta cihaz simgesine tıklayarak Cihaz Modu'na geçin ve sayfanızın farklı viewport boyutlarında tam olarak nasıl göründüğünü inceleyin. Cetvel CSS piksellerini gösterir.
content Özniteliği Varyasyonları
initial-scale, minimum-scale ve maximum-scale değerlerini de ayarlayabilirsiniz. Bunları makul değerlerde tutun. user-scalable=no kullanmadan minimum-scale=1 ayarlamak, yakınlaştırmaya hâlâ izin verir ve erişilebilir yaklaşım budur.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">Viewport ve Medya Sorguları
Medya sorguları, fiziksel pikselleri değil viewport genişliğini (CSS pikseli değerini) kullanır. Viewportunuz 390px ise @media (max-width: 768px) koşulu sağlanır. Viewport meta etiketi, bu kesim noktalarının mobil cihazlarda doğru çalışmasını sağlar.
Kısa Kontrol
Viewport meta etiketindeki width=device-width ifadesinin amacı nedir?
Özet: Viewport Meta Etiketi
ifadesini her zaman
içine ekleyin. Kullanıcı ölçeklendirmesini asla devre dışı bırakmayın. Viewport'a göre boyutlandırma için vw/vh kullanın. dvh, mobil tarayıcı arayüzü sorunlarını çözer. Bu tek etiket, tüm duyarlı CSS kurallarının mobil cihazlarda çalışmasını sağlar.Sıkça Sorulan Sorular
“Viewport Meta Etiketi” dersi ücretsiz mi?
Evet — “Viewport Meta Etiketi” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Viewport Meta Etiketi” dersinde ne öğreneceğim?
viewport meta etiketini ekleyin ve duyarlı yerleşimlerin mobil cihazlarda doğru çalışması için neden gerekli olduğunu öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“Viewport Meta Etiketi” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Viewport Meta Etiketi
- Yerleşim için Flexbox
- Yerleşim için CSS Grid
- Medya Sorguları ve Mobil Öncelikli Geliştirme