177 lines
4.2 KiB
Markdown
177 lines
4.2 KiB
Markdown
# 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
|
||
```javascript
|
||
// 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
|
||
```bash
|
||
# 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
|