Статья удалена — Вопросы на DTF

А вдруг тут остались не только боты и щитпостеры.

Я не разработчик css, html и т.д., поэтому вопрос может быть скомканным.

У меня есть веб-интерфейс для управлением WireGuard, который я взял на GitHub:

GitHub - wg-easy/wg-easy: The easiest way to run WireGuard VPN + Web-based Admin UI.

Я по мере возможностей вношу измения в исходный код, чтобы поправить баги/недороботки. Одна и таких недороботок была (для меня) неадаптированный цвет статус-бара при использовании PWA, при этом в веб-версии всё ок:

Я нашёл в инете, что для решения нужно прописать мета-тег:

Сейчас тег head выглядит так:

<head> <meta charset="utf-8"> <title>WireGuard</title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link rel="stylesheet" href="./css/app.css"> <link rel="manifest" href="./manifest.json"> <link rel="icon" type="image/png" href="./img/favicon.png"> <link rel="apple-touch-icon" href="./img/apple-touch-icon.png"> </head>

И статус-бар действительно теперь цвета веб-интерфейса, но сам интерфейс съехал под статус-бар:

Как это пофиксить я не нашел. При этом в веб-версии всё ок:

Памагите найти решение...

UPD: Решил добавлением мета-тегов в css, которые отвечают за подстроение интерфейса под рабочее пространство смартфона (учитывая чёлки, островки и т.д.), не знаю про Android, на IOS помогло.

Было:

body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ }

Стало:

body { margin: 0; line-height: inherit; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); box-sizing: border-box; }