Siteniz Iphone X uygumlu olsun.
Yeni iPhone X, güzel bir uçtan uca görüntü özelliğine sahip. Yani neredeyse uçtan uca. Tarayıcının üst kısmında, web sitelerini dikey olarak görüntülerken bir sorun yaratmayan ancak varsayılan yatay görüntüleme sırasında bazı sıkıntılar yaratan küçük bir girinti problemi mevcut.
Girintiye yer bırakmak için iOS 11, web sitelerini ekranda “güvenli bir alan” içerisinde sınırlar. Çoğu web sitesinde bu, sol ve sağ tarafta boşluklar olmasına neden olur.
Neyse ki bu sorunu çözmek için iki basit yöntem var.
arkaplan rengi (background-color)
Web siteniz arka plan için tek bir düz renk kullanıyorsa, sizin için en iyi ve en kolay çözüm, body etiketinde bir arka plan rengi özelliği ayarlamaktır. Bu, yukarıdaki web sitesini şu hale getirir:
Gördüğünüz gibi kenar boşlukları yerinde duruyor ancak şimdi doğru renkle doldu.
viewport-fit
Tasarım üzerindeki kontrolünüzün yüksek olmasın tercih ediyorsanız veya arka plan olarak bir gradyan (gradient) veya resim kullanıyorsanız, bir arka plan rengi ayarlamak uygun olmayabilir. Apple, IOS’un son sürümüne CSS Yuvarlak Görüntüleme Spesifikasyonundan viewport-fittanımlayıcısını ekledi.
Viewport meta tagına basitçe viewport-fit=cover eklemek, sitenizi yalnızca güvenli bölgeyi değil tüm ekranı dolduracak şekilde genişletir,
Simdi de girintiyle üst üste binmemesi için tasarımda bazı manuel ayarlamalar yapmak gerekiyor ve bunu yapmak geliştirene/tasarımcıya düşüyor.
safe-area-inset-*
iOS 11’in Safari sürümünde gerekli olabilecek düzenlemeleri yapabilmek için, viewport-fit=cover kullanılırken yararlanılabilen bazı sabitler bulunur.
- safe-area-inset-top
- safe-area-inset-right
- safe-area-inset-left
- safe-area-inset-bottom
Bu margin, padding ya da top veya left gibi mutlak konum değeri olarak eklenebilir.
Ben web sitemin main container’ine aşağıdaki kodu ekledim:
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);Bu menü ve sosyal medya ikonlarının girintiyle üst üste binmesi sorunumu mükemmel bir şekilde çözdü.
Kaynak: http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/
