Mobil web geliştirme sırasında Safari tarayıcısında karşılaşılan çapraz tarayıcı sorunlarını çözmek için viewport yüksekliği hesaplama sorunu ve sanal klavye nedeniyle UI kayma sorunu için çözüm önerileri sunuldu.
Viewport yüksekliği problemi dvh veya svh kullanımı, sanal klavye problemi ise min-height kullanımı, satıcı ön eklerinin uygulanması ve JavaScript kullanılarak dinamik kontrol gibi yöntemlerle çözülebilir.
Safari mobil web geliştirme sırasında satıcı ön eklerinin kullanımı ve LocalStorage, SessionStorage kapasite sınırlamaları (yaklaşık 5MB) ve sekmeler arasında Storage paylaşımının mümkün olmaması gibi hususlar göz önünde bulundurulmalıdır.
Yazıyı özenle yazıp kaydettim ama 404 hatası alıp kayboldu ㅠㅠ
Mobil web geliştirme sırasında karşılaştığım iki sinir bozucu ç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 Internet'in kendi yerleşik alt navigasyon çubukları vardır. Özel olarak göster/gizle ayarlanmadıkça, 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şmesinden kaynaklanıyor.
Örneğin, yükseklik 100vh olarak ayarlandıysa, navigasyon çubuğu yokken düzen doğru çizilir, ancak navigasyon çubuğu görünür olduğunda navigasyon çubuğu arabirimi gizler.
Bu sorunu çözmek için
1. dvh kullanın.
Dvh, dinamik viewport'tur ve viewport yüksekliği değiştiğinde değişiklikleri otomatik olarak yansıtır. Bu nedenle, adres çubuğunun veya alt navigasyonun varlığına bağlı olarak UI düzen değişikliklerine uyum sağlanabilir.
2. svh de dikkate alınabilir.
Svh, adres çubuğunu veya navigasyonu hariç, yalnızca UI alanının yüksekliğidir. Adres çubuğunun veya navigasyonun görünmesinin beklendiği durumlarda, svh kullanmak daha doğrudur.
input seçildiğinde sanal klavye nedeniyle UI'nin kayması sorunu
Mobil Safari'de input seçildiğinde, sanal klavye nedeniyle mevcut UI öğelerinin kayması sorunu oluştu. Diğer tarayıcılarda sanal klavye genellikle mutlak olarak görünür, ancak Safari mobil web'de sanki display block uygulanmış gibi yer kaplıyor.
Safari, sanal klavye yükseldiğinde viewport yüksekliğini dinamik olarak ayarladığı için, vh birimi kullanan öğeler yeniden ayarlanarak sorun oluşur. Bunu çözmek için,
3-2. Sanal klavye göründüğünde konumu kontrol edin. (Aşağıdaki örnekte sınıf uygulanmıştır)
let originalHeight =window.innerHeight;window.addEventListener('resize',()=>{if(window.innerHeight< originalHeight){// Sanal klavye açıkdocument.body.classList.add('keyboard-visible');}else{// Sanal klavye kapalıdocument.body.classList.remove('keyboard-visible');}});
Ben 3-1 numarayı kullanarak çözdüm. Eğer 3-1 numara beklendiği gibi çalışmazsa, önce aşağıdaki kodu kullanarak niyetinizin doğru olup olmadığını kontrol edin.
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ı öneki kullanın.
* Satıcı öneki, tarayıcının belirli css özniteliklerini anlayıp işlemesini sağlayan bir öneki olup, farklı tarayıcılarda farklı şekillerde uygulanan css'in amaçlandığı gibi uygulanmasını sağlar. Bu sayede aynı tarayıcılar arasında tutarlılık sağlanır ve eski tarayıcılarla uyumluluk sağlanır.
Türler
-webkit-: Chrome, Safari vb. -moz-: Mozilla Firefox -ms-: Internet Explorer ve Edge -o-: Opera
Satıcı öneki gerektiren tipik öznitelikler şunlardır:
.container{display: -webkit-flex;/* Safari */display: flex;-webkit-flex-direction: row;flex-direction: row;}.item{-webkit-flex-grow:1;/* Safari */flex-grow:1;-webkit-flex-shrink:1;/* Safari */flex-shrink:1;}.grid-container{display: -ms-grid;/* IE11 ve eski tarayıcılar */display: grid;/* En yeni tarayıcılar */}.sticky-element{position: -webkit-sticky;/* Safari */position: sticky;}input[type="text"],select{-webkit-appearance: none;-moz-appearance: none;appearance: none;}
Ayrıca Safari, LocalStorage ve SessionStorage kapasitesini yaklaşık 5 MB ile sınırlandırır ve her sekme arasında Storage alanını paylaşmaz, bu nedenle dikkatli olmak gerekir.
ps. Yazdığım yazı kaybolduğu için çok üzgünüm. Yüklenen yazım kaliteli bir yazı değil ama,,,ㅠ Geçici olarak kaydetmeyi mutlaka yapmalıyım.