Question

设置元标记时

apple-mobile-web-app-capable

和

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

要创建一个全屏网络应用程序，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： Bug已在iOS 8.3 Beta 1中修复

Answer 1

从技术上讲，这不是你问题的答案，但我一直在记录我的发现，同时试图自己解决这个问题，这是我迄今为止所发现的。我打算将它作为自己的问题发布，但认为它将作为副本关闭。

在运行固定网络应用程序的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会产生透明背景，但屏幕底部没有恼人的条纹

在所有情况下，内容都显示在＆＃34;下面＆＃34;酒吧。即酒吧不会推倒内容。

在iPhone6上，状态栏根本不会显示在横向上。但是在纵向中，出现以下行为：

black按预期工作，内容被推下（哇!!!）
default顶部有一个空白条
black-translucent会产生透明背景，内容位于

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

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

我尝试使用javascript动态更改它，但它似乎没有效果。

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

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

其他地方记录了同样的问题：

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

Answer 2

自iOS6以来存在问题。我之前发布过Apple的错误报告，其中包含您今天提供的所有详细信息，后来被标记为重复。这是2年前，不幸的是今天我发现它甚至更糟。

原始错误报告的ID为11966202，仍然是（打开）。由于您遇到同样的问题，您唯一能做的就是确认将升级它的错误，并在将来修复它。

正如我所说，我正在寻找更多的解决方案，足以告诉你没有解决方法。该问题可以在所有iOS设备上重现，但根据屏幕尺寸和方向的不同表现。

对于iOS 8，我们现在遇到一个小故障，其中视口只是屏幕的一小部分，它完全关闭/崩溃。

编辑：Apple Ticket现已关闭

截至周一，Apple已经关闭了机票，我可以确认使用8.1最终解决了我遇到的相机和状态栏问题。希望它也解决了你的问题：）

Answer 3

问题来自于使用<meta name="apple-mobile-web-app-status-bar-style" content="black">为了摆脱应用底部的黑条，您需要使用：<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">使用黑色半透明会让您的应用看起来像同样适用于iOS7和iOS8。您仍然需要调整应用顶部的任何内容以清除iOS状态栏图标。

Answer 4

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

Answer 5

为了扩展上述所有内容，我的解决方案是：

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

然后为需要向下移动20px的所有元素创建自定义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上进行了测试，期望额外降低20px并且不存在 - 奖金！

Answer 6

值得注意的是，将状态栏样式设置为＆＃39; black＆＃39;只要您在iPad中使用iPad打开Web应用程序，就可以正常工作。然后，即使您旋转iPad，黑条也能正确显示。

只有在横向进入Web应用程序时才会出现问题，至少对我而言。我正在使用带有IOS 8.1的iPad 3，我相信它在8.3

中仍然是相同的

Answer 7

只需在应用顶部添加一个20px高的div，然后将其作为状态栏

Answer 8

apple-mobile-web-app-status-bar-style在iOS 8中处于非活动状态。如果在顶部添加固定div，则仅将其添加到OS 8_0

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

iOS 8：Web应用程序状态栏位置和调整大小问题

8 个答案: