iPad - Safari 状态栏覆盖部分网页，其中 apple-mobile-web-app-capable 设置为 true

Posted 2023-02-24

【中文标题】iPad - Safari 状态栏覆盖部分网页，其中 apple-mobile-web-app-capable 设置为 true

【英文标题】：iPad - Safari status bar covers part of web page with apple-mobile-web-app-capable set to true

【发布时间】：2012-10-24 10:06:34

【问题描述】：

使用以下两个元标记允许在 iPad 上全屏显示的网页：

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

现在的问题是，浏览器的状态栏覆盖了网页的标题。如何避免这种情况？状态栏是透明的，但这不是解决办法，网页头部有一些链接，不能再点击了。

【参考方案1】：

将内容设置为“黑色半透明”时，状态栏将略微透明并位于网络应用的顶部。如果您在顶部有文字，您可能不需要此选项。

试试这个：

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

或者这个：

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

【讨论】：

这似乎没有什么区别，即使是 black 或 default，header 仍然会隐藏 web 应用程序的部分内容。跨度>

【参考方案2】：

尝试在正文顶部添加 20 像素的边距（或任何包含您希望在状态栏下方显示的内容的元素）。状态栏高 20 像素。

body 
    margin-top: 20px;

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

html 
    background: #778899;