ipad - 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 像素的边距（或任何包含您希望显示在状态栏下方的内容的元素）。状态栏高 20 像素。

body {
    margin-top: 20px;
}

设置背景颜色html来设置状态栏的背景：

html {
    background: #778899;
}