iOS 8：网络应用状态栏位置和调整大小问题答案

【问题标题】：iOS 8: web app status bar position and resizing problemsiOS 8：网络应用状态栏位置和调整大小问题
【发布时间】：2014-09-17 07:32:19
【问题描述】：

设置元标记时

apple-mobile-web-app-capable

和

apple-mobile-web-app-status-bar-style

要创建全屏 Web 应用，iOS 状态栏位于屏幕顶部（半透明），底部还有一个额外的空白黑条。

这是我的代码：

<!DOCTYPE html><html><head><meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body><h1>Test</h1>
<p>Capture a photo using camera</p>
<input type="file" capture="camera" accept="image/*">
</body></html>

标签apple-mobile-web-app-status-bar-style 还有一个问题。通过相机输入拍摄并接受照片后，屏幕两侧会出现黑条。我在 iPad3 上使用 iOS8 GM。

我认为这可能是 iOS 8 的错误，但 Apple 似乎并不关心我的错误报告 :(

有人知道这个问题的解决方案/解决方法吗？

更新 1： Apple 在 9 月 19 日将我的错误报告标记为重复（已关闭）。

更新 2： 错误已在 iOS 8.3 Beta 1 中修复

【问题讨论】：

iOS7也存在这个问题。我相信这是因为当照片卷应用程序打开（选择文件）时，它里面有代码将该栏设置为黑色并覆盖元标记中的设置。不幸的是，除了点击主屏幕按钮并从图标重新进入应用程序之外，我不知道如何解决这个问题。
@FunkyMonk91 我无法在我的 iOS7 iPad3 上重现此问题。它只发生在 iOS8 上。顺便提一句。 iOS8 GM 现在是 iOS8 决赛 :-(
在 iOS 7 上绝对没有这个（完全相同）问题。我今天在 ipad 上新安装的 iOS 8 上看到的第一件事。此外，滑动事件等其他一些事情不再起作用，但只能在主屏幕使用，而不是在常规浏览器中。 :-(
看来，如果您以纵向模式启动网络应用程序，然后再转为横向模式，则它可以正常工作。在iOS8.0 Safari中测试
在装有 iOS 11.3 的 iPhone SE 上，我似乎遇到了类似的问题。当我使用black 栏并在横向一侧启动快捷方式时，没有状态栏。但只要我旋转并让方向变为纵向，就会添加一个状态栏。回到风景，现在有一个黑条，可以有一个状态栏，但它是空的。

标签： html ios mobile ios8

【解决方案1】：

从技术上讲，这不是您问题的答案，但我一直在记录我的发现，同时尝试自己解决这个问题，这是我迄今为止发现的。我打算将其作为自己的问题发布，但认为它会作为重复项关闭。

在运行固定 Web 应用程序的 iOS8 设备上。关于标签：

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

来自the Apple developer reference：

如果内容设置为默认，状态栏显示正常。如果设置为黑色，则状态栏的背景为黑色。如果设置为黑色半透明，则状态栏为黑色半透明。如果设置为默认或黑色，则 Web 内容将显示在状态栏下方。如果设置为黑色半透明，则 Web 内容将显示在整个屏幕上，部分被状态栏遮挡。默认值为default。

要启用此功能，您需要使用

<meta name="apple-mobile-web-app-capable" content="yes">

在 iOS6 和 7 中，这或多或少符合预期。

在 iOS8 中这似乎完全被破坏了。例如，在 iPad Air 纵向运行的 iOS 8.0.2 具有以下行为：

black 产生透明背景。屏幕底部有一个实心黑条
default 或不设置值会导致透明背景和屏幕底部的实心白色条
black-translucent 产生透明背景，但屏幕底部没有恼人的条形

在所有情况下，内容都显示在栏的“下方”。即栏不会将内容向下推。

在 iPhone6 上，状态栏根本不会横向显示。然而，在纵向中，以下行为：

black 按预期工作，内容被下推（哇！！！）
default 顶部有一个空白栏
black-translucent 产生透明背景，下面有内容

我还没有机会在 iPhone6+ 上进行测试

xcode 中的 iOS 模拟器似乎无法可靠地再现真实设备上发生的行为。

我试过用javascript动态改变它，但似乎没有效果。

为了让这更有趣/更令人沮丧，您可以通过在 html 元素上设置样式来覆盖状态栏（时钟/wifi 等）。例如

  html {background: black;}
  body {background: #DDD; margin-top: 20px}

其他地方记录的相同问题：

https://discussions.apple.com/thread/6557230?start=0&tstart=0

【讨论】：

感谢您的详细撰写。我在横向模式下使用 iPad Air 时遇到了完全相同的问题。
这快把我逼疯了。

【解决方案2】：

这个问题从 iOS6 开始就存在了。我之前已将您今天提供的所有详细信息发布到 Apple 的错误报告中，后来被标记为重复。这是 2 年前的事了，不幸的是，今天我发现它变得更糟了。

原始错误报告的 ID 为 11966202，并且仍然（打开）。既然你有同样的问题，你唯一能做的就是确认会升级它的错误，他们会在未来修复它。

正如我所说，我正在寻找一个足以告诉您没有解决方法的解决方案。该问题可以在所有 iOS 设备上重现，但会根据屏幕大小和方向而有所不同。

在 iOS 8 中，我们现在遇到了一个小故障，即视口变成了屏幕的一小部分，并且完全关闭/崩溃。

编辑：Apple Ticket 现已关闭

截至周一，Apple 已关闭请求，我可以确认使用 8.1 最终解决了我遇到的相机和状态栏问题。希望它也解决了您的问题:)

【讨论】：

我注意到，当您以横向模式打开 WebClip 时，屏幕底部会出现额外的 20 像素空白，并且根本无法填充。 Apple 在最新版本的 iOS 中彻底打破了状态栏行为。
使用 iPad mini 和 iOS 8.1 无法解决我的问题。横向和纵向模式仍然被破坏。

【解决方案3】：

问题来自使用<meta name="apple-mobile-web-app-status-bar-style" content="black">为了摆脱应用底部的黑条，您需要使用：<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 使用 black-translucent 将使您的应用在两个 iOS7 中看起来都一样和iOS8。您仍然需要调整应用顶部的任何内容以清除 iOS 状态栏图标。

【讨论】：

另外，我没有提到要使此解决方案生效，您必须从主屏幕中删除您的网络应用程序并重新添加它。
感谢您的提示。至少底部的黑条消失了。然而现在我在顶部有一个我不喜欢的透明状态栏。要么是黑色的，要么根本没有酒吧。但是透明的在我的眼睛里很烂。我想知道为什么每个新版本的软件，不是保留好的东西，开发坏的东西，而是总是带来一堆以前没有的新的看不见的问题？这让我感到恶心。更不用说这次更新带来的糟糕的 Safari 7.1……

【解决方案4】：

Apple 在 iOS 8.3 beta 1 中修复了这个错误

【讨论】：

【解决方案5】：

要扩展以上所有内容，我的解决方案是：

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

然后为所有需要向下移动 20 像素的元素创建一个自定义 CSS，尤其是在普通浏览器 [桌面/移动] 视图的 CSS 中存在的任何 position: fixed; top: 0px;。

将自定义 CSS 添加到 head 部分，在 CSS 链接下方，使用以下脚本 [我的工作示例]

<script type="text/javascript">
   if (window.navigator.standalone) {
       document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"assets/css/style-body-ios8.css\" charset=\"utf-8\" \/>");
}
</script>

我的结果是桌面/移动浏览器网站视图正常，然后网站作为网络应用程序添加到主屏幕，启动时打开全屏，状态栏看起来像以前的 ios8 [fyi，我添加了背景颜色黑色到我的固定标题 css 以使状态栏显示为黑色背景

在运行 ios 8.0.2 的 iPad/iPhone/iPod 上测试 - 一切正常。仅供参考，在旧的 iPod ios 6.1.6 上进行了测试，预计会有额外的 20 像素下移，但没有出现 - 奖金！

【讨论】：

你能做一个包含你的 css 的 js fiddle 吗？

【解决方案6】：

值得注意的是，只要您使用 iPad 纵向打开 Web 应用程序，将状态栏样式设置为“黑色”就可以正常工作。然后，即使您旋转 iPad，黑条也会正确可见。

问题仅在于您以横向方式进入 Web 应用程序时，至少对我而言。我正在使用带有 IOS 8.1 的 iPad 3，我相信它在 8.3 中仍然是一样的

【讨论】：

【解决方案7】：

只需在您的应用顶部添加一个 20px 高的 div 并让它充当状态栏

【讨论】：

:) 哈哈哈我等着这个答案！太好了。
在顶部添加 20px 高的 div 无济于事，因为在横向模式下启动应用程序时，您的视口会损坏，屏幕底部有 20px 的空白空间，无法填充任何东西。所以如果你有一个固定的底部菜单，它会漂浮在空间中，下面有白条。

【解决方案8】：

apple-mobile-web-app-status-bar-style 在 iOS 8 中处于非活动状态。如果你在顶部添加一个固定的 div，只为 OS 8_0 添加它

if (navigator.appVersion.indexOf("OS 8_0 like Mac") > 0) ...

【讨论】：

请注意，此检查不适用于 8.1...最好使用用户代理解析器并检查版本 >= 8（直到此问题得到修复 - 如果有的话）