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

问题描述

在 iPhone X 上加载一个应用程序，我在缺口的两侧有白条.我正在使用离子标签.我尝试更改正文和 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="StatusBarBackgroundColor" value="#25707B"/> 更改状态栏背景颜色.不知道是什么原因造成的.

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

添加了白边的图像.

推荐答案

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 plugin 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.

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