Press "Enter" to skip to content

Ionic Tabbar ve Status Bar İphone X ve Sonrası Telefonlar için Overlaps Hatası ve Çözümü

Samet Ocak 0

Merhabalar,

Ionic ile mobile uygulama geliştirirken hesaba katılmayan bir olayla karşılaştık, bunun sonucunda normal iphone telefonlarda İphone x ve sonraki sürümlerinde tabbar da ve statusbar da kaymalar olduğunu gördük

Dolayısıyla kullanıcı deneyimi tarafında büyük bir risk ve kullanılamaz hale gelen uygulamamızın çözümünü sizlere anlatıyorum.

Tabbar çözümü için projemizin global.scss dosyasına aşağıdaki kodları koymamız yeterli

body {
  margin-top: env(safe-area-inset-top);
  margin-top: constant(safe-area-inset-top);
}

ion-tab-bar {
  margin-bottom: env(safe-area-inset-bottom);
}

Status bar çözümü için ise aşağıdaki iki işlem yapacağız bunlardan birincisi projemizde bulunan config.xml dosyası içerisinde <platform name=”ios”> tagını bulup içerisine aşağıdaki meta kodunu yazmak

<preference name="StatusBarOverlaysWebView" value="false" /> 

Yani şöyle ;

<platform name="ios">
....
...
...
<preference name="StatusBarOverlaysWebView" value="false" /> 
...
</platform>

Aynı zamanda projenin ana dizininde bulunan index.html dosyamızın header kısmındaki aşağıda vermiş olduğum meta kodunun doğru şekli var oradaki gibi olmasını sağlamamız yeterli. Teşekkürler.

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir