iPhone'da kaybolan üst menüyü nasıl düzelttik?
Kısa sayfalarda üst menü bazı telefonlarda kayboluyordu. Sorunun kaynağı tek bir CSS birimiymiş.
Mobilde siteyi gezerken bir şey dikkatimi çekti: bazı kısa sayfalarda, özellikle iPhone'da, üst menü bir anda kayboluyordu. Sayfayı kaydırınca da bir türlü yerine oturmuyordu.
Sorun neydi?
Telefon tarayıcılarında adres çubuğu siz kaydırdıkça küçülüp büyüyor. Sayfanın yüksekliğini "ekran kadar" diye tanımladığımızda tarayıcı bunu adres çubuğu kapalıyken hesaplıyordu. Sayfa olması gerekenden biraz uzun kalınca da menü ekranın dışına kayıyordu.
Çözüm
Çözüm tek satırdı. Ekran yüksekliğini anlık hesaplayan yeni bir birime geçtik:
min-height: 100dvh;Buradaki dvh, ekranın o anki gerçek yüksekliği demek. Adres çubuğu açılsa da kapansa da sayfa doğru boyda kalıyor.
Küçük ama önemli
Bu tür hataları çoğu zaman sizler fark ediyorsunuz. Bir şey tuhaf görünürse çekinmeden yazın; düzeltmesi bazen tek satır sürüyor.