Ionic - iPhone X标题中的白边 [英] Ionic - White edge on iPhone X in header

问题描述

在iPhone X上加载应用程序，我在凹槽的两侧都有白条。我正在使用Ionic Tabs。我试过改变身体和 ion-app 背景颜色。

Loading an app on iPhone X and I have white bars on the two sides of the notch. I am using Ionic Tabs. I have tried changing the body and ion-app background colour.

body, ion-app.app-root {
    background-color: color($colors, main);
}

首先包括 viewport-fit = cover

运行cordova-plugin-statusbar：^ 2.2.3

还尝试使用更改状态栏背景颜色< preference name =StatusBarBackgroundColorvalue =＃25707B/> 不知道造成它们的原因。

Also tried to change Statusbar background colour with <preference name="StatusBarBackgroundColor" value="#25707B" /> Don't know what is causing them.

编辑：添加了白边的图像。

Added image of the white edge.

推荐答案

iPhone X上的状态栏大小已更改，因此旧版本的 cordova-plugin-statusbar 在iPhone X上显示不正确。

The status bar size has changed on iPhone X, so older versions of cordova-plugin-statusbar display incorrectly on iPhone X.

修复合并到 cordova-plugin-statusbar@2.3.0 发布，所以请确保你正在使用至少这个版本。
您可以通过运行 cordova插件ls 来检查项目中安装的版本。

A fix was merged into the cordova-plugin-statusbar@2.3.0 release, so make sure you're using at least this version. You can check which version is installed in your project by running cordova plugin ls.

有关iPhone X上Cordova应用程序问题和解决方案的更全面列表，请参阅此答案。

For a more comprehensive list of issues and solutions for Cordova apps on iPhone X see this answer.

这篇关于Ionic - iPhone X标题中的白边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！