Duyarlı Tasarım ve Viewport: Telefonunuz Ne Görüyor, Laptopunuz Ne Görüyor?

Laptopunuzda mükemmel görünen bir site büyük ihtimalle 1440px genişliğindeki bir laptop için tasarlanmıştır. Onu 375px genişliğindeki bir iPhone'da açın ve viewport meta etiketinin neden var olduğunu anlayacaksınız: etiket olmadan tarayıcı sayfanın tamamını 1440 piksel genişliğinde işler, telefon ekranına sığdırmak için küçültür ve her şeyi okumak için yakınlaştırma yapmanız gereken devasa bir sayfa sunar. Viewport, tarayıcınızın sayfanız üzerindeki penceresidir ve onu kontrol etmek, duyarlı tasarımın en önemli ilk adımıdır.

Viewport gerçekte nedir?

Viewport fiziksel ekran değildir. Tarayıcının içerik alanının iç boyutlarıdır — HTML ve CSS'inizi gerçekten görüntüleyen, kaydırma çubuklarını, tarayıcı arayüzünü ve işletim sistemi unsurlarını hariç tutan kısımdır. Masaüstü tarayıcılarda viewport genellikle pencere boyutuyla eşleşir; telefonlarda ise donanım piksel sayısını değil, cihazın CSS piksel boyutlarıyla eşleşir.

CSS pikselleri ile donanım pikselleri arasındaki ayrım tam olarak devicePixelRatio kavramının geldiği yerdir. Modern bir iPhone 15, 393x852 CSS piksel noktası viewportu raporlar, ancak ekranın 1179x2556 fiziksel pikseli vardır — devicePixelRatio değeri 3'tür. Yani her CSS pikseli 3x3'lük bir donanım piksel bloğuna karşılık gelir ve keskin metin, net kenarlar üretir. Bunu doğrudan yönetmeniz gerekmez; tarayıcı ve işletim sistemi eşlemeyi halleder. Ancak bu açıklama, 375px CSS viewportunun düşük çözünürlüklü bir ekran olmadığı gerçeğini açıklar.

Viewport meta etiketi ve neyi kontrol eder

Viewport, <head> etiketinin içine konulan tek bir HTML öğesiyle yapılandırılır:

<meta name="viewport" content="width=device-width, initial-scale=1">

İki kritik değer width=device-width ve initial-scale=1 dir. İlkincisi tarayıcıya şunu söyler: CSS viewport genişliğini, 980px varsayılan masaüstü genişliğinde olduğu gibi varsayımla değil, cihazın CSS piksel cinsinden ekran genişliğine eşitle. İkincisi, sayfa yüklendiğinde yakınlaştırmayı %100'e kilitleyerek içeriğin otomatik olarak yakınlaştırılmasını veya uzaklaştırılmasını engeller.

Bu etiket olmadan mobil tarayıcılar sayfaları masaüstüdeymiş gibi işler. iOS Safari tarihsel olarak 980px'lik bir düzen viewportu kullanıyor ve bunu telefon ekranına sığdırmak için küçültüyordu. Sonuç, yalnızca yakınlaştırma yapıldığında okunabilen metin, tıklanamayacak kadar küçük dokunma hedefleri ve form doldurmak için yakınlaştırma gerektiren formlardı. Her modern CSS çatısı — Bootstrap, Tailwind, Foundation — bu etiketi varsayılan olarak içerir, bu yüzden sorun kaybolmuş gibi görünür. Sıfırdan inşa ederken etiketi unutursanız, bunu hemen fark edersiniz.

CSS breakpoint'leri: gelenekler, yasalar değil

Bir medya sorgusu breakpoint'i, düzeninizin değiştiği CSS genişliğidir. En yaygın kullanılan değerler 640px, 768px, 1024px ve 1280px'tir ve bunlar gerçek cihaz kategorilerine yaklaşık karşılık geldiği için yerleşik kalmıştır:

Bu sayılar Tailwind'in varsayılan yapılandırmasından miras kalan geleneklerdir ve en çok kullanılan cihazlarla iyi eşleşir. Ancak hiçbir spesifikasyon tarafından buyrulmaz. Düzeninizin tuttuğu içeriğe göre tepki vermesi gerekir: bir kart bileşeni 790px'de garip sarılıyorsa, breakpoint'ınızı oraya koyun. Breakpoint'ların amacı, her genişlikte içeriği okunabilir ve düzeni kasıtlı tutmaktır, yuvarlak sayılara ulaşmak değildir.

/* Mobil öncelikli: temel stiller telefonlar içindir */
.container {
  padding: 1rem;
}

/* Tablet ve üzeri */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Masaüstü ve üzeri */
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}

Mobil öncelikli yaklaşım: neden daha iyi çalışır?

Mobil öncelikli yaklaşım, küçük ekranlar için temel CSS'i yazar ve ekran büyüdükçe min-width medya sorgularıyla karmaşıklık ekler. Tersi — masaüstü öncelikli — tam genişlikli bir düzenden başlar ve küçük ekranlarda max-width ile özellikler kaldırır. Mobil öncelikli tercih edilir çünkü daha hafif, daha hızlı ve bakımını yapması daha kolay CSS üretir.

Temel neden kademeli geliştirmedir. Mobil öncelikli bir stil sayfası yükleyen telefon, yalnızca ihtiyacı olan CSS'i alır: daha az ızgara kuralı, masaüstü navigasyon geçersiz kılma yok, daha küçük görsel yüklemeler. Aynı stil sayfasını yükleyen masaüstü, temel stillere medya sorgusu eklemelerini de alır. Masaüstü öncelikli ise, telefon tüm masaüstü CSS'i yüklemek zorunda kalır ve sonra ihtiyaç duymadığı şeyleri geri almak için ek kurallar yükler. Sonuç daha fazla bayt, yavaş bağlantılarda daha yavaş işleme ve özgünlük çatışması olasılığının artmasıdır.

Ayrıca bir hata ayıklama avantajı da vardır: 1440px'de bir şey bozuk görünüyorsa, hangi medya sorgusunu inceleyeceğinizi bilirsiniz. Masaüstü öncelikli yaklaşımda 375px'de bir şey bozuk görünüyorsa, sorun temel stillerde, 768px geçersiz kılmada, 1024px geçersiz kılmada veya 1280px geçersiz kılmada olabilir. Mobil öncelikli, küçük ekranların her zaman en basit sürümü gösterdiği anlamına gelir.

px vs rem vs em: her biri ne zaman önemlidir?

CSS, öğeleri boyutlandırmak için üç birim sistemi sunar ve her biri farklı bir amaca hizmet eder:

• px (piksel): CSS pikseline bağlı mutlak birimler, donanım pikseli değil. Kenarlık genişlikleri için (1px solid), gölgeler ve kullanıcının temel yazı tipi ayarından bağımsız olarak aynı boyutta kalması gereken her şey için kullanın. Duyarlı düzenlerde px ile yazı tipi boyutu kullanmayın — ölçeklenebilir tipografinin amacını ortadan kaldırır.
• rem (kök em): Kök elementin yazı tipi boyutuna göredir ve tarayıcılarda varsayılan olarak 16px'tir. Kafanızda 1rem'i 16px olarak ayarladıysanız dönüşümler doğrudandır: 1.5rem = 24px, 2rem = 32px. Kök boyutunu değiştirirseniz her rem değeri birlikte ölçeklenir. Bu yüzden rem, modern CSS'te duyarlı yazı tipi boyutları, dolgular ve kenar boşlukları için standarttır.
• em: Elementin kendi yazı tipi boyutuna göredir. 16px tabanlı bir üst öğe içinde 16 × 1.2 × 2 = 38.4px olur. Bu iç içe davranış em'i spacing için öngörülemez yapar, ancak metinle kasıtlı olarak ölçeklenmesi istenen boyutlandırma için kullanışlıdır, örneğin etiketlerin yanındaki simge boyutları.

Pratik bir kural: genel düzen ile birlikte ölçeklenmesi gereken her şey için rem, ölçeklenmemesi gereken her şey için px ve yalnızca değerin çevreleyen metinle birlikte büyümesini kasıtlı olarak istediğinizde em kullanın. Duyarlı bir tasarımda dolguların breakpoint'ler arasında beklenmedik şekilde zıpladığını görüyorsanız, suçlu neredeyse her zaman font-size değişimindeki em tabanlı spacing'tir.

Duyarlı düzenleri bozan yaygın tuzaklar

Duyarlı tasarım basit görünür, ta ki kenar vakaları yüzeye çıkana kadar. Bunlar her seviyeden geliştiriciyi yakalayan tuzaklardır:

• Konteynerlarda sabit piksel genişlikleri: Bir sarmalayıcıya width: 960px koymak katı bir sınır oluşturur. 768px'lik bir tablette konteyner taşar ve yatay kaydırma çubuğu tetikler. Bunun yerine yüzde veya rem değerleriyle max-width kullanın — düzen her zaman küçülebilir.
• 100vw kaydırma çubuğu taşması: 100vw birimi, dikey kaydırma çubuğu dahil viewport genişliğinin %100'ü demektir. Kaydırılabilir içerikli bir sayfada bu, roughly 15-17px'lik (kaydırma çubuğu genişliği) yatay taşmaya neden olur. Bunun yerine gövdede veya sarmalayıcıda 100% kullanın — kaydırma çubuğunu hariç tutar.
• Mobilde çok küçük yazı tipi boyutları: 14px veya 16px body font-size masaüstünde iyi görünür ancak telefonlarda, özellikle uzun okumalarda dar hissedilebilir. Çözüm masaüstü metnini büyütmek değil, mobil tabanı biraz daha yüksekte (örn. 16-18px) ayarlamak ve masaüstü breakpoint'lerinin rem oranlarıyla küçültmesine izin vermektir. Apple, okunabilirlik için minimum 11pt (yaklaşık 14.6px) önermektedir.
• Kısıtlanmamış genişlikteki görseller: Sabit genişliğe veya hiç kısıtlama olmayan bir görsel, konteynerini zorlayarak taşar. Tüm içerik görsellerine max-width: 100%; height: auto; uygulayarak ebeveyniyle birlikte küçülmelerini sağlayın.
• Gerçek sorunları gizleyen gizli taşma: Yatay kaydırmayı gizlemek için üst öğeye overflow: hidden uygulamak bir belirti düzeltmesidir. Düzen hâlâ bozuktur; yalnızca göremiyorsunuz. Taşmaya neden olan öğeyi bulmak için tarayıcınızın duyarlı denetim aracını kullanın.

Geliştiriciler duyarlılığı gerçekten nasıl test eder?

Duyarlı tasarımı test etmek farklı viewport boyutlarını simüle etmeyi gerektirir. Geliştiriciler üç ana yaklaşım kullanır:

• Tarayıcı DevTools cihaz araç çubuğu: Chrome, Firefox ve Safari'nin tümü, herhangi bir viewport genişliği ve yüksekliği yazmanıza, cihaz ön ayarlarından seçim yapmanıza ve dokunma olayları, kullanıcı aracısı dizeleri ve piksel yoğunluğu dahil olmak üzere cihaz öykünmesini açıp kapatmanıza olanak tanıyan duyarlı bir mod sunar. Bu, düzen hatalarını yakalamanın en hızlı yoludur — genişliği yeniden boyutlandırın ve nelerin yanlış gittiğini izleyin.
• Gerçek cihazlar: Öykünmeler mükemmel değildir. Dokunma davranışı, yazı tipi işleme, kaydırma momentumu ve sanal klavyeler gerçek donanımda farklıdır. En az bir iPhone ve bir Android telefonda test etmek, emülatörlerin kaçırdığı sorunları yakalar — özellikle çentik ve yuvarlatılmış köşelerdeki güvenli alan ekleri ve iOS Safari'nin lastik bant kaydırması etrafındaki.
• Duyarlı viewport araçları: Çevrimiçi araçlar, tarayıcınızın şu anda hangi viewport boyutlarını raporladığını, bunları yaygın cihaz ön ayarlarıyla karşılaştırmanızı ve CSS pikselleri ile fiziksel pikseller arasındaki farkı anlamanızı sağlar. Bu, bir tasarımın DevTools'ta doğru görünmesinin ancak gerçek bir cihazda biraz farklı olmasının nedenini ayıklamak için particularly kullanışlıdır — cevap genellikle devicePixelRatio'dur.

Convrs'teki duyarlılık araçları

Convrs, viewport davranışını anlamanıza ve test etmenize yardımcı olan iki araç içerir: ekran ve viewport kontrol aracı tarayıcınızın canlı viewport boyutlarını, devicePixelRatio değerini ve yaygın cihaz ön ayarlarıyla karşılaştırmayı gösterir — tasarımın makinenizdeki ile bir müşterinin telefonundaki neden farklı göründüğünü anlamak için faydalıdır; ve px-rem-em dönüştürücü herhangi bir kök yazı tipi boyutunda CSS piksel birimleri, rem ve em değerleri arasında anında dönüşüm yapar. Her iki araç da yalnızca tarayıcınızda çalışır, hiçbir veri cihazınızdan çıkmaz.