iPad - строка состояния Safari покрывает часть веб-страницы, для которой функция apple-mobile-web-app установлена ​​в значение true

Question

Веб-страница, использующая следующие два мета-тега для полноэкранного режима на iPad:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Проблема в том, что строка состояния браузера закрывает заголовок веб-страницы. Как этого можно избежать? Строка состояния прозрачна, но это не решение, в заголовке веб-страницы есть некоторые ссылки, по которым больше нельзя нажимать.

Answer 1

Если для содержимого установлено значение "полупрозрачный черный", строка состояния будет слегка прозрачной и расположена поверх веб-приложения. Если у вас есть текст вверху, вы, вероятно, не хотите эту опцию.

Попробуйте это вместо этого:

<meta name="apple-mobile-web-app-status-bar-style" content="black">

Или это:

<meta name="apple-mobile-web-app-status-bar-style" content="default">

Answer 2

Попробуйте добавить 20-пиксельное поле в верхней части тела:

body {
    margin-top: 20px;
}