Konuyu Açan
#1
Mobilde ekranın altına sabitlenen “Devam et” veya “Sepete ekle” butonları ilk bakışta çok kullanışlı; ama form alanına dokununca sanal klavye açılıyor ve buton bazen klavyenin üstünde kalıp alanı kapatıyor. Bir de iPhone’lardaki alt güvenli alanı hesaba katmayınca buton ekran kenarına fazla yapışabiliyor.
Ben önce gerçekten sabit konumlandırmaya ihtiyaç var mı diye bakıyorum. İçerik akışında kalabilen bir çağrı butonu, çoğu durumda
Yalnız bu, klavye davranışını tek başına çözmüyor. Tarayıcıların sanal klavyeyi görünüme yansıtma şekli değişebildiğinden, özellikle giriş alanlarının bulunduğu sayfalarda gerçek cihazda denemek önemli. Butonun klavye açıkken gizlenmesi mi, yukarı taşınması mı gerektiği de kullanım senaryosuna bağlı; ödeme formunda gizlemek kullanıcıyı eylemsiz bırakabilir, kısa bir arama formunda ise daha temiz durabilir.
Siz bu tür alt aksiyonlarda ne tercih ediyorsunuz: akışta kalan buton mu, sabit bar mı? Klavye açılınca nasıl davranmasını sağlıyorsunuz?
Ben önce gerçekten sabit konumlandırmaya ihtiyaç var mı diye bakıyorum. İçerik akışında kalabilen bir çağrı butonu, çoğu durumda
position: fixed kullanmaktan daha az sorun çıkarıyor. Sabit olması gerekiyorsa güvenli alanı alt boşluğa eklemek işe yarıyor:KOD
12345
.fixed-action {
bottom: env(safe-area-inset-bottom, 0px);
padding-bottom: 12px;
}
Yalnız bu, klavye davranışını tek başına çözmüyor. Tarayıcıların sanal klavyeyi görünüme yansıtma şekli değişebildiğinden, özellikle giriş alanlarının bulunduğu sayfalarda gerçek cihazda denemek önemli. Butonun klavye açıkken gizlenmesi mi, yukarı taşınması mı gerektiği de kullanım senaryosuna bağlı; ödeme formunda gizlemek kullanıcıyı eylemsiz bırakabilir, kısa bir arama formunda ise daha temiz durabilir.
Siz bu tür alt aksiyonlarda ne tercih ediyorsunuz: akışta kalan buton mu, sabit bar mı? Klavye açılınca nasıl davranmasını sağlıyorsunuz?