Добавить верхнюю часть отступа в строку состояния Cordova

Question

Я пытаюсь создать приложение Cordova с полупрозрачным статусбаром. Используя Cordova-plugin-statusbar, я справляюсь с этим результатом. Тем не менее, содержимое строки состояния перекрывается с тем собственным содержимым строки состояния Android, как показано на этом изображении.

есть ли другой способ исправить это?

Спасибо

Answer 1

cordova-plugin-statusbar увеличивает высоту страницы, чтобы включить область с информацией о состоянии устройства, чтобы область страницы начиналась в левом верхнем углу экрана, а не под строкой состояния устройства. Вам просто нужно добавить верхний отступ в область строки состояния.

HTML:

<div id=".statusBar">...Status bar content...</div>

CSS:

.statusBar{
    position:fixed;
    display:block;
    width: 100vw;
    height: 20px;
    left: 0px;
    top: 0px;
    padding-top: 20px;
}

В зависимости от вашего предполагаемого внешнего вида вы также можете использовать cordova-plugin-device, чтобы также обнаружить любые различия в статусных строках платформы и соответствующим образом изменить CSS.

Answer 2

Добавьте эти строки в ваш config.xml файл:

<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#000000" />
<preference name="StatusBarStyle" value="lightcontent" />
<plugin spec="https://github.com/apache/cordova-plugin-statusbar.git" source="git" />

PhoneGap-разработчиков-Guid