38980-vm/app-9w9pd00g5j41/MOBILE_TEST_GUIDE.md

Mobil Test Rehberi

Hızlı Test Adımları

1. Chrome DevTools ile Test

iPhone 13 Simülasyonu

1. Chrome'da F12 tuşuna basın
2. Device Toolbar'ı açın (Ctrl+Shift+M veya Cmd+Shift+M)
3. Cihaz seçin: "iPhone 13 Pro" veya "iPhone 12 Pro"
4. Viewport: 390x844

Android Simülasyonu

1. Device Toolbar'da "Pixel 5" veya "Galaxy S20" seçin
2. Veya custom viewport: 360x800

2. Test Edilecek Sayfalar

Ana Sayfa (/)

• Hero section tam genişlikte
• Butonlar dokunulabilir (44px+)
• Text okunabilir
• Background blur'lar ekran dışına taşmıyor
• Feature cards 1 kolon
• Testimonials 1 kolon

Seyahat Planlayıcı (/planner?trip_id=...)

• Header görünür
• Gün seçici yatay scroll
• Timeline scroll edilebilir
• Yer kartları tam genişlikte
• Harita responsive
• "Yer Ekle" butonu dokunulabilir
• Dialog ekrana sığıyor

Keşfet (/explore)

• Kategori badge'leri yatay scroll
• Yer kartları 1 kolon
• Arama çubuğu tam genişlikte
• Bookmark butonları dokunulabilir

Günlük (/journal)

• Fotoğraf grid 2 kolon
• Entry kartları tam genişlikte
• Tab navigation dokunulabilir
• Filter badge'leri yatay scroll

Admin Panel (/admin)

• Mobil menü çalışıyor
• Stats kartları 2 kolon
• Tablolar yatay scroll
• Action butonları dokunulabilir

3. Kontrol Edilecek Elementler

Yatay Taşma

// Console'da çalıştırın:
document.querySelectorAll('*').forEach(el => {
  if (el.scrollWidth > el.clientWidth) {
    console.log('Overflow:', el);
  }
});

Touch Target Boyutları

• Tüm butonlar minimum 44x44px olmalı
• Input'lar minimum 44px yüksekliğinde olmalı
• Icon butonlar minimum 44x44px olmalı

Text Okunabilirlik

• Minimum font-size: 14px (body text)
• Başlıklar: 20-30px
• Input font-size: 16px (iOS zoom önleme)

4. Landscape Mode Testi

1. Device Toolbar'da "Rotate" butonuna tıklayın
2. Veya viewport'u 844x390 yapın
3. Kontrol edin:
   • Header compact
   • Modal'lar scroll edilebilir
   • İçerik görünür

5. Gerçek Cihazda Test

iPhone

1. Safari'de siteyi açın
2. Kontrol edin:
   • Input'lara tıklayınca zoom olmuyor (font-size 16px+)
   • Safe area (notch) doğru
   • Scroll smooth
   • Touch target'lar yeterli

Android

1. Chrome'da siteyi açın
2. Kontrol edin:
   • Scroll smooth
   • Touch target'lar yeterli
   • Text okunabilir

Yaygın Sorunlar ve Çözümleri

Sorun: Yatay Taşma

Çözüm: overflow-x: hidden ve max-width: 100% eklendi

Sorun: Text Çok Büyük

Çözüm: Responsive text boyutları (h1: 30px, h2: 24px, h3: 20px)

Sorun: Butonlar Küçük

Çözüm: Minimum 44x44px touch target

Sorun: Dialog Ekran Dışına Taşıyor

Çözüm: max-width: calc(100vw - 2rem)

Sorun: Grid Responsive Değil

Çözüm: Mobilde 1 kolon grid

Sorun: Tablo Taşıyor

Çözüm: overflow-x: auto ile horizontal scroll

Hızlı Kontrol Listesi

Genel

• Yatay scroll yok (istenmeyen)
• Tüm text'ler okunabilir
• Butonlar dokunulabilir (44px+)
• Input'lar 44px+ yüksekliğinde
• Dialog'lar ekrana sığıyor

Sayfalar

• Home
• TripPlanner
• Explore
• Journal
• Admin Dashboard

Componentler

• Header - Mobile menu
• Footer - 1 kolon
• Button - 44px+
• Input - 44px+, 16px font
• Dialog - Responsive
• Table - Horizontal scroll

Performans Metrikleri

Hedef

• First Contentful Paint: < 1.8s
• Largest Contentful Paint: < 2.5s
• Cumulative Layout Shift: < 0.1
• First Input Delay: < 100ms

Test

# Lighthouse ile test
npm run build
npx serve -s dist
# Chrome DevTools > Lighthouse > Mobile

Notlar

• Tüm düzeltmeler src/index.css dosyasında
• Responsive breakpoint: 768px
• Küçük mobil breakpoint: 430px
• Touch device detection: (hover: none) and (pointer: coarse)
• Safe area insets: iPhone notch desteği

Destek

Sorun bulursanız:

1. Chrome DevTools Console'u kontrol edin
2. Element'i inspect edin
3. Computed styles'ı kontrol edin
4. MOBILE_FIX_SUMMARY.md dosyasına bakın