Neden Önemli?
Mobil cihaz ekran boyutları çok çeşitli:
- iPhone SE (4.7"): 375x667
- iPhone 16 Pro Max (6.9"): 440x956
- iPad (10.9"): 820x1180
- Android: 360px'den 412px'e kadar genişlik
- Katlanabilir cihazlar (Fold, Flip)
- 2026 itibarıyla katlanabilir cihaz pazarı büyümeye devam ediyor ve layout esnekliği daha da önemli hale geliyor.
Responsive vs Adaptive
Responsive
- Esnek layout, her boyuta uyum
- Yüzdesel genişlik, flex layout
- Sürekli uyum (her piksel)
- Daha az kod, daha kolay bakım
Adaptive
- Belirli breakpoint'lerde farklı layout
- Tablet'te 2 sütun, telefonda 1 sütun
- Kesikli uyum (kırılma noktaları)
- Daha optimize edilmiş deneyim her form factor için
Temel Teknikler
Flex Layout
- flexDirection: row/column
- flex: 1 (kalan alanı doldur)
- flexWrap: wrap (taşmayı sarma)
- gap: elemanlar arası boşluk
- alignItems ve justifyContent ile hizalama
Safe Area
- Notch, Dynamic Island, home indicator bölgeleri
- SafeAreaView (React Native)
- safeAreaInsets kullanımı
- Her platformda test et
- Landscape modda farklı safe area değerleri
Scroll
- ScrollView: Kısa içerik listesi
- FlatList/FlashList: Uzun listeler (performans - virtualized)
- KeyboardAvoidingView: Klavye açıldığında layout uyumu
- SectionList: Gruplandırılmış listeler
Breakpoint Stratejisi
| Genişlik | Cihaz | Layout |
|---|---|---|
| <380px | Küçük telefon | Tek sütun, kompakt |
| 380-428px | Normal telefon | Tek sütun, standart |
| 428-768px | Büyük telefon/Mini tablet | 1-2 sütun |
| 768-1024px | Tablet | 2 sütun, sidebar |
| 1024px+ | Büyük tablet/iPad Pro | 3 sütun, split view |
Platform Özel
iOS
- Size classes: Compact / Regular (width/height)
- Split View (iPad): 2 uygulama yan yana
- Multitasking: Slide Over, Split View
- Dynamic Type: Font boyutu kullanıcı ayarına uymalı
- Stage Manager (iPadOS 16+): Pencere yönetimi
Android
- Configuration qualifiers: sw320dp, sw600dp, sw720dp
- Foldable desteği: WindowManager API, WindowSizeClass
- Multi-window: Split screen, freeform
- Android 15+ ile gelişmiş foldable API'ları
- Large screen guidelines (tablet + foldable)
Katlanabilir Cihazlar
2026 itibarıyla katlanabilir cihazlara özel dikkat noktaları:
- Table-top mode: Alt yarı kontrol, üst yarı içerik (video izleme)
- Book mode: İki panel yan yana (e-posta listesi + detay)
- Hinge awareness: Katlanma çizgisine içerik yerleştirme
- Jetpack WindowManager ile fold state algılama
- React Native: react-native-windows-info veya Dimensions API
React Native
- Dimensions API: Ekran boyutu (statik)
- useWindowDimensions: Dinamik boyut takibi (rotation, foldable)
- Platform.select: Platform bazlı değer
- PixelRatio: Piksel yoğunluğu
- react-native-responsive-screen: Yüzdesel boyutlandırma (wp, hp)
- react-native-size-matters: Ölçeklenebilir boyutlandırma (scale, vs, ms)
Best Practices
- Sabit piksel yerine esnek birimler kullan
- SafeArea her zaman uygula
- En küçük ve en büyük cihazda test et
- Landscape modu destekle (veya bilinçli olarak engelle)
- Metin boyutunu erişilebilirlik ayarına bağla
- Tablet layout'u ihmal etme (özellikle iPad)
- Katlanabilir cihazları göz önünde bulundur
- maxWidth ile çok geniş ekranlarda içerik genişliğini sınırla
"Telefonumda güzel görünüyor" yetmez. En az 3 farklı ekran boyutunda test edin. Tablet ve foldable kullanıcılarını da düşünün.