iPad - Safari状态栏覆盖部分网页，Apple-mobile-web-app-capable设置为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

内容设置为“黑色半透明”时，状态栏将略微透明，位于Web应用程序的顶部。如果顶部有文本，则可能不需要此选项。

试试这个：

<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;
}