Як зробити фуллскрін додатку в Cordova на iOS, прибрати чорні полоси зверху низу, зліва зправа

Я думаю ви вже стикалися з тим, що у в сконвертованому додатку через Cordova є чорні полоси зверху, та знизу. А на андроїді справа та зліва. Більш того, додати сколиться поза межами html view. Це легко виправити. 

Для цього нам знадобиться декілька плагінів плагінв - cordova-plugin-statusbar, cordova-plugin-viewport, cordova-plugin-fullscreen.

Перший cordova-plugin-statusbar доможе нам прибрати полоси зверху та знизу на iOS. З певними опціями, він може накласти статус бар iOS поверх вашого додатку, що зробить його повтоэкранним, та викне полоси зверху та знизу.

cordova plugin add cordova-plugin-statusbar --save

Також додайте до вашого config.xml наступну строку:

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

І в ваш html viewport потрібно додати viewport-fit=cover, в мене це виглядає так:

<meta name="viewport" content="width=375, viewport-fit=cover, user-scalable=no">

Але після цих маніпуляцій, все одно iOS не буде приймати viewport, тому що ві вбудований в кордову. Для цього нам потрібно перезаписати його, це робить плагін cordova-plugin-viewport. Налаштувань в нього нема, тому просто додайте його до вашого проекту.

cordova plugin add cordova-plugin-viewport --save

Але і це ще не все. На андроїді часто буває, що зʼявляються полоси, справа та зліва, та додаток веде себе не зовсім корректно, при статичному вьюпорті. Щоб це пофіксити, вам потрібно встановити плагін cordova-plugin-fullscreen, він вирішить цю проблему:

cordova plugin add cordova-plugin-fullscreen --save

І налаштування до нього:

<preference name="Fullscreen" value="true" />
<preference name="AndroidLaunchMode" value="singleInstance" />
<preference name="DisallowOverscroll" value="true" />
<preference name="KeepRunning" value="true" />

На цьому все, тепер ваш додаток повністю фуллскрін )