🚀 HTML Duyarlı Tasarım: Viewport ve Akışkan Mimari

Ekran boyutlarına uyum sağlayan tasarımların HTML temelleri, viewport kontrolü ve akışkan içerik mantığı.

Selamlar dostlar, bugün modern web'in olmazsa olmazı 'Responsive' (Duyarlı) tasarımın HTML tarafındaki temellerini konuşacağız. Çoğu kişi bunu sadece CSS'ten ibaret sansa da, her şey HTML'in <head> kısmında atılan tek bir satırlık imza ile başlar.

1. Viewport: Tarayıcıya Gerçeği Söylemek

Eski mobil tarayıcılar, web sitelerini 'masaüstü' gibi görüp onları küçülterek ekrana sığdırmaya çalışırdı. Bu da yazıların karınca duası gibi görünmesine neden olurdu. İşte <meta name="viewport" content="width=device-width, initial-scale=1.0"> etiketi tam burada devreye girer.

  • width=device-width: Sayfanın genişliğini cihazın fiziksel genişliğine eşitler.
  • initial-scale=1.0: Sayfa ilk yüklendiğinde yakınlaştırma oranını bire bir yapar.

2. Akışkan Düzen Mantığı

Duyarlı tasarımda sabit genişliklerden (width: 800px) kaçınıp, esnek birimlere (%, vw, vh) yöneliriz. HTML elemanları kapladıkları kutunun içine bir sıvı gibi dolmalıdır.

Teknik Bir Not: Çok oyunculu fizik tabanlı oyunumuz Car Football'u mobil tarayıcılara optimize ederken yaşadığımız en büyük sorun, sahadaki butonların (gaz, fren, zıplama) farklı telefon ekranlarında ya çok küçük kalması ya da ekrandan taşmasıydı. Viewport ayarını doğru kurgulayıp UI elemanlarını yüzde bazlı yerleştirdiğimizde, oyun her cihazda aynı 'dokunma hissiyatını' vermeye başladı. HTML'de attığınız bu temel, oyunun oynanabilirliğini doğrudan etkiliyor.

🚀 Sanal Kodlama Alanı Yükleniyor...

Responsive İçin Altın Kurallar

  1. Görselleri Unutmayın: HTML'de eklediğiniz bir resim, kendi orijinal boyutunda kalmak ister. CSS tarafında img { max-width: 100%; height: auto; } kuralını uygulamak, resimlerin ekrandan taşmasını önleyen en temel hamledir.
  2. Sabit Genişlik Tuzağı: width: 500px gibi tanımlamalar, 320px genişliğindeki bir telefon ekranında 'yatay kaydırma çubuğu' (horizontal scroll) oluşmasına sebep olur. Bu, mobil kullanıcı deneyiminin katilidir.
  3. Hücresel Veri ve Performans: Responsive tasarım sadece boyut değildir. Resimlerin boyutlarını optimize etmek (loading="lazy" kullanmak), mobil kullanıcıların kotalarını ve sabırlarını korur.

Unutmayın, bir web sayfası kağıt üzerine basılmış bir poster değil, içine girdiği kabın şeklini alan bir sıvıdır.

Ovid Game Studio | Teknik Notlar ovidgame.com