Yaşadığım Cross-Browsing Sorunları (Özellikle Safari)

Mobil web geliştirirken karşılaştığım iki can sıkıcı çapraz tarayıcı sorunu ve ayrıca dikkate alınması gereken diğer sorunlar hakkında

kayıt tutmak istiyorum.

Tarayıcının kendi adres çubuğu ve navigasyon çubuğundan kaynaklanan viewport yüksekliği hesaplama sorunu

Safari ve Samsung İnternet'te tarayıcının kendisine ait alt navigasyon çubuğu bulunur. Özel olarak göster/gizle ayarlanmadığı sürece, aşağı kaydırıldığında görünür ve yukarı kaydırıldığında kaybolur.

Sorun, bunların viewport'un sabit kalmaması ve değişmesiyle ilgilidir.

Örneğin, yüksekliği 100vh yaparsak, navigasyon çubuğu olmadığında düzen doğru çizilir, ancak navigasyon çubuğu görünür hale gelirse, navigasyon çubuğu arayüzü örter.

Bu sorunu çözmek için

1. dvh kullanın.

dvh dinamik viewport'tur ve viewport yüksekliği her değiştiğinde değişikliği otomatik olarak yansıtır. Bu nedenle, adres çubuğunun veya alt navigasyonun olup olmamasına bağlı arayüz düzeninde değişikliklere uyum sağlamak mümkündür.

2. svh de göz önünde bulundurulabilir.

svh, adres çubuğunu veya navigasyonu hariç, yalnızca arayüz alanının yüksekliğidir. Adres çubuğunun veya navigasyonun görünmesi beklenen durumlarda svh kullanmak daha doğrudur.

input seçildiğinde (focus) sanal klavye nedeniyle arayüzün kayması sorunu

Mobil Safari'de input seçildiğinde, sanal klavye nedeniyle mevcut arayüz öğelerinin kayması sorunu oluştu. Diğer tarayıcılarda sanal klavye genellikle mutlak olarak görünürken, Safari mobil web'de sanki display block uygulanmış gibi yer kapladı.

Safari, sanal klavye açıldığında viewport yüksekliğini dinamik olarak ayarlayarak, vh birimi kullanan öğelerin yeniden ayarlanmasıyla oluşan bir sorundur. Bunu çözmek için,

1. min-height kullanın.

Yüksekliği sabitleyerek arayüzün kaymasını önler.

2. Satıcı ön eklerini uygulayın. (Ayrıntılar aşağıda)

Safari gibi belirli tarayıcılarda uygulanan öznitelikleri ekler.

3. Javascript ile viewport'u dinamik olarak kontrol edin.

* Bu yöntem önerilmez. Kaydırma yüksekliği aniden hareket ederek düzenin yanıp sönmesine neden olur.

Resize olayını dinleyerek viewport değiştiğinde algılar ve uygun stili uygular.

3-1. focusin olayı oluştuğunda konumu kontrol edin.

3-2. Sanal klavye göründüğünde konumu kontrol edin. (Aşağıdaki örnekte sınıf uygulanıyor)

Sadece CSS ile tamamen çözümlemek en iyisidir, ancak yukarıdaki örneklerle çözülemiyorsa, position: absolute veya fixed olan bir öğe olup olmadığını kontrol edin ve top, right, left, bottom özniteliklerini kaldırarak CSS'i düzeltmeniz gerekir.

Diğerleri

Ayrıca, Safari'de mobil web geliştirirken dikkate alınması gereken bazı noktaları araştırdım.

1. Bazı öznitelikleri kullanırken satıcı ön ekleri kullanın.

* Satıcı ön ekleri, tarayıcının belirli CSS özniteliklerini anlayıp işleyebilmesi için kullanılan ön eklerdir ve tarayıcılar tarafından farklı şekillerde uygulanan CSS'in istenildiği gibi uygulanmasını sağlar. Bu sayede aynı tarayıcılar arasında tutarlılık sağlanır ve eski tarayıcılarla da uyumluluk sağlanır.

Türleri

-webkit-: Chrome, Safari vb.
-moz-: Mozilla Firefox
-ms-: Internet Explorer ve Edge
-o-: Opera

Satıcı ön ekine ihtiyaç duyan tipik öznitelikler şunlardır:

Ayrıca, Safari, LocalStorage ve SessionStorage kapasitesini yaklaşık 5 MB ile sınırlandırır ve her sekme arasında depolama alanını paylaşmadığı için dikkat edilmelidir.