Telefonda bir sayfayı açtığınızda içerik parmağınızla sağa sola oynuyorsa yatay kaydırma sorunu yaşıyorsunuz demektir. Bu durum kullanıcıyı rahatsız eder, sayfada kalma süresini düşürür ve mobil uyumluluk değerlendirmelerinde olumsuz sinyal oluşturur. İyi haber şu: sorunun arkasında genellikle birkaç tekrar eden neden vardır ve bunlar sistematik biçimde bulunabilir.
En sık görülen nedenler
Birinci neden, ekran genişliğinden büyük sabit ölçülerdir. Örneğin bir kutuya 800 piksel genişlik verdiyseniz, 390 piksellik bir ekranda taşma kaçınılmazdır. İkinci neden, boyutu sınırlanmamış görseller, videolar ve gömülü iframe öğeleridir. Üçüncüsü, geniş tablolar ile satır sonuna inmeyen uzun bağlantı metinleridir. Dördüncüsü, negatif margin, sağa taşan mutlak konumlu öğeler ve ekran dışına yerleştirilmiş açılır menülerdir. Son olarak, viewport meta etiketinin eksik olması sayfanın masaüstü genişliğinde çizilip küçültülmesine yol açar.
Taşan öğeyi nasıl bulursunuz?
Tarayıcının geliştirici araçlarında mobil görünümü açın ve sayfayı farklı genişliklerde deneyin. Taşmanın başladığı genişlikte öğeleri tek tek inceleyin. Hızlı bir yöntem, geçici olarak tüm öğelere kontür çizgisi vermektir; sayfa sınırının dışına çıkan kutu hemen göze çarpar. Bir diğer yöntem, konsolda belge genişliğinden büyük olan öğeleri listeleyen kısa bir kod parçası çalıştırmaktır. Bölümleri sırayla gizleyerek de suçluyu daraltabilirsiniz. Gerçek cihazda test etmek de önemlidir, çünkü emülatör bazı davranışları birebir yansıtmayabilir.
Kalıcı çözümler
Önce sayfanın başlığında genişliği cihaza eşitleyen viewport etiketinin bulunduğundan emin olun. Görseller ve videolar için en yüksek genişliği yüzde yüz, yüksekliği otomatik yapın. Sabit piksel genişlikleri yerine yüzde, en yüksek genişlik ve esnek yerleşim yöntemlerini tercih edin. Uzun kelimelerin ve adreslerin satır kırması için kelime kırma özelliğini kullanın. Geniş tabloları, kendi içinde yatay kaydırılan bir kapsayıcıya alın; böylece taşma yalnızca tabloyla sınırlı kalır, sayfa bozulmaz. Menü gibi ekran dışına yerleşen öğelerde görünürlüğü kapatmak için konum yerine uygun gizleme yöntemleri seçin.
Kaçınılması gereken kestirme çözüm
Gövdeye taşmayı gizleme kuralı eklemek sorunu görünmez kılar ama nedenini ortadan kaldırmaz. Kesilen içerik okunamaz hale gelebilir ve bazı mobil tarayıcılarda sabit konumlu öğeler yine bozulur. Bu kuralı yalnızca kök nedeni düzelttikten sonra güvenlik önlemi olarak düşünün.
Yeni bir sayfa veya bileşen yayınlamadan önce en az üç farklı ekran genişliğinde kaydırma testi yapmayı alışkanlık haline getirin. Küçük bir kontrol, hem kullanıcı deneyimini hem de arama görünürlüğünü korur.