safari IOS menü çubuğu ekranın% 10'unun altındaki düğmelerle çakışıyor

14

Birden çok platformda işlevsel ve güzel olması gereken bir web portalı inşa ediyorum. Platformlardan biri IOS Safari ve bu bir sorunla karşılaştım. Kodumda, iki yüzer düğmeyi% 100 genişlik ve yüksekliğe sahip bir divin altına hizalarım Bu iyi çalışır ve düğmelerim tam olarak sayfanın alt kısmında olması gerektiği gibi görünür. Ancak düğmelere tıkladığımda, mobil safari'den kompakt görünüm tam görünüme geçer ve düğmelerim alt gezinme çubuğunun arkasına gizlenir!

Kullanıcı ekranın en alt% 10'una dokunduğunda safari mobile'ın genişletilmiş menüyü göstermesi normal bir davranış mıdır? Bundan nasıl kaçınabilirim?

Bu gifte, sorunu IOS simülatöründe misal
görebilirsiniz : Gördüğünüz gibi, sorun yalnızca bir düğme görünümün% 10'unun altında olduğunda ortaya çıkar. Bu sadece normal bir düğme, Kodum birkaç geliştirici tarafından üç kez kontrol edildi ve hiçbir hatası yok.

— dennismuijs
kaynak

Kod snippet'inizi listelerseniz, bunu işaretleyin ve yığın taşmasına geçmek için geçiş yapabiliriz ...

— bmike

Safari için hata oluşturdum, lütfen buraya yorum yapın: bugs.webkit.org/show_bug.cgi?id=194235

— sheerun

5

Bu, Mobil Safari'deki normal bir davranıştır, alt tarafa hafifçe vurmak çeşitli tarayıcı seçeneklerini görüntüler ve web sayfasını buna göre yukarı kaydırır. Web sayfası işlevselliği yine de aynı kalır, böylece kullanıcı sahip olduğu işlevlere erişmek için kaydırıldıktan sonra düğmeye dokunmaya devam edebilir.

— nohillside
kaynak

4

Teşekkürler Patrix, bunun normal olduğunu biliyorum, ama html, css veya js aracılığıyla bu davranışı geçersiz kılmanın bir yolu var mı? Bu soruyu yığın taşması üzerine zaten gönderdim, ancak elma ile ilgili bir şey olduğu için belki farklı bir yol bilecek

— dennismuijs

1

StackOverflow (veya web geliştiricilerinin videoyla sohbet ettiği bir SE sitesi) bu tür bir şey için AD'den (son kullanıcı sorunlarına odaklanmıştır) daha iyidir. Tarayıcı kontrollerine erişmek bir şekilde kullanıcı için gerekli olduğundan, davranıştan kaçınmanın bir yolu olup olmadığından şüphe duyuyorum.

— nohillside

bunun için yığın taşması q & a bağlantısı?

— Ben Roberts

7

Sanırım bir cevap bulmuş olabilirim. İçeriğinizi aşağıdaki stillere sahip olacak şekilde ayarlama:

height: 100% (içeriğin görünümü doldurmasına ve en alttan öteye gitmesine izin verir)
overflow-y: scroll(görünümün altına gitmenizi sağlar; varsayılan değer visible)
-webkit-overflow-scrolling: touch (kaydırma davranışlarını düzeltmek için)

Safari'deki iOS menüsünü her zaman görünmeye zorlar. Bu şekilde, düğme tıklamaları Safari menüsünü açmak yerine çalışır. Bu yardımcı olur umarım!

— jennz0r
kaynak

Elbette, bu işe yarar, ancak tüm siteler overflow-y: scrollana içerik alanlarındaki ayarları tolere edemez . Bu kesmek, tüm çocuk öğelerini etkileyecek yan etkilere sahiptir. Daha doğru bir şekilde ifade etmek gerekirse, bu css özellikleri tüm alt öğeleri doğrudan etkiler ve safari menüsünü göstermeye zorlamak aslında yan etkidir.

— zevdg

Teşekkürler. Henüz ekranın alt kısmına doğru dokunmayı denemedim, ancak tasarımımın en az% 10'u Safari'nin iğrenç menü çubuğu tarafından kaplanmıyor. Buna eklemek için, içeren her öğeyi height: 100%de vermeniz gerekir . Mobil cihazlardan çok para kazanan bir şirket için mobil web deneyimi korkunçtur.

— corysimmons