Web uygulaman mobilde neden kötü hissettiriyor? Küçük ayarlar, büyük fark

Sorun tek bir hata değil, küçük sürtünmeler

Wes ve Scott’ın çıkış noktası basit: Yerel (native) uygulamalar telefonda pürüzsüz hissettiriyor, web uygulamaları ise çoğu zaman “bir şeyler tuhaf” dedirtiyor. Sebep genelde tek büyük bir hata değil. Bir sürü küçük sürtünme üst üste biniyor. İyi haber şu: Çoğunun çözümü birkaç satır.

Dokununca büyüyen form alanı

iPhone’da bir input’a dokunuyorsun, sayfa birden yakınlaşıyor ve klavye kapanınca geri dönmüyor. Bölüme göre iOS Safari, yazı boyutu 16 pikselin altındaki alanlarda bunu yapıyor. Çözüm, input, select ve textarea’larda yazı boyutunu en az 16px (çoğu zaman 1rem) tutmak.

Yaygın kısayol, viewport etiketine maximum-scale=1 ya da user-scalable=no eklemek. Yapma. MDN’ye göre yakınlaştırmayı kapatmak, az gören kullanıcıların sayfayı okumasını engelliyor. Erişilebilirlik kuralları (WCAG) en az iki kat büyütmeye izin verilmesini istiyor.

Yana kayan sayfa

Sayfayı aşağı kaydırırken her şey biraz sağa sola oynuyorsa, bir öğe ekrandan taşıyor. Çoğu zaman suçlu, kırılmayan uzun bir bağlantı ya da kelime. Bölümün tavsiyesi: body’ye overflow: hidden yapıştırmak yerine taşan öğeyi bul ve düzelt. Bilerek yana kayan listelerde ise (mesela etiketler) o listeye kendi kaydırmasını ve scroll-snap’i ver.

Yanlışlıkla seçilen yazılar ve geciken dokunuşlar

Bir butona iki kez dokununca üstündeki yazının seçilmesi, uygulama hissini bozuyor. Bölüme göre çözüm, seçilmesi anlamsız arayüz parçalarına (çipler, sekmeler) user-select: none vermek. Ama bütün siteye değil: Kullanıcı metni ve bağlantıları kopyalayabilmeli.

Bölümde geçmeyen bir ekleme: touch-action: manipulation. MDN’ye göre kaydırmaya ve iki parmakla yakınlaştırmaya izin veriyor, sadece çift dokunarak yakınlaştırmayı kapatıyor. Böylece tarayıcı “ikinci dokunuş gelecek mi” diye beklemeden click olayını hemen üretebiliyor.

Adres çubuğu, güvenli alanlar ve klavye

Mobil tarayıcıda adres çubuğu kaydırdıkça açılıp kapanıyor. Bu yüzden 100vh ya ekrandan taşıyor ya da eksik kalıyor. web.dev’e göre artık üç birim var: svh çubuklar açıkken, lvh kapalıyken, dvh ise o anki yüksekliğe göre ölçülüyor. Dikkat: dvh saniyede 60 kez güncellenmiyor, tarayıcı bunu bilerek seyreltiyor.

Alt kenara yapışık bir buton çubuğun varsa çentikli ve ev çubuklu ekranları da düşün. Viewport etiketine viewport-fit=cover ekleyip padding-bottom: calc(1em + env(safe-area-inset-bottom)) gibi bir değerle butonu sistem çubuğundan uzak tutabilirsin.

Klavye açılınca ne olacağını da seçebilirsin. Chrome 108’den beri Android’de varsayılan, sadece görünen alanın küçülmesi. Sayfa düzeninin klavyeye göre yeniden hesaplanmasını istiyorsan viewport etiketine interactive-widget=resizes-content ekleyebilirsin. Chrome’un yazısına göre bu ayar iOS’taki WebKit tabanlı tarayıcılarda çalışmıyor.

Kaydırma tuzakları ve akıcılık

Açılır bir menüyü sonuna kadar kaydırınca arkadaki sayfanın da kaymaya başlaması, MDN’nin deyişiyle “scroll chaining”. O menüye overscroll-behavior: contain verirsen kaydırma menüde kalıyor. Sayfanın tamamına verirsen aşağı çekip yenileme davranışını da kontrol edebiliyorsun. Bölümde ayrıca tam genişlikteki haritaların kaydırmayı yuttuğu konuşuluyor. Çözüm: gerçek bir telefonda dene.

Akıcılık için bölümün önerisi, DevTools’taki FPS ölçerle ve “paint flashing” ile sürekli yeniden boyanan yerleri bulmak. Hareket ettirdiğin şeyi mümkünse opacity ve transform ile canlandır. Hedef yüksek değil, tutarlı kare hızı.

Sayfalar arası geçişteki beyaz parlama da “web sitesi” hissini artırıyor. Aynı kökenli sayfalarda iki tarafa da @view-transition { navigation: auto; } eklemek, tarayıcıya geçişi canlandırmasını söylüyor. MDN’ye göre bu henüz her tarayıcıda yok.

Sonra ne oldu?

Bir ay sonra açıklanan Interop 2026 listesine, sayfalar arası view transitions da girdi. Yani bu geçişlerin bütün tarayıcılarda aynı çalışması bu yılın ortak hedeflerinden biri. Telefonların bir de katlanan türü var: Onlar için ayrı API’leri iPhone Duo yazımızda anlattık.

Düşün

• Kendi siteni telefonda açıp bir formu doldur. İlk hangi an “yerel uygulama olsa böyle olmazdı” dedin?
• Kullanıcının yakınlaştırmasını kapatmak hangi durumda gerçekten gerekli olabilir?

Kendi cümlelerimizle yazılmış bir özettir, çeviri değildir. Tüm kaynaklar yukarıda.