iOS 8：networking应用程序状态栏的位置和resize的问题
设置元标记时
apple-mobile-web-app-capable 和
apple-mobile-web-app-status-bar-style
要创build一个全屏的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的错误，但苹果似乎并不关心我的错误报告:(
有谁知道这个问题的解决scheme/解决方法？
更新1：苹果公司在9月19日将我的错误报告标记为重复（closures）。
更新2： Bug在iOS 8.3 Beta 1中得到修复
从技术上讲，这不是你的问题的答案，但我一直在logging我的发现，同时试图自己解决这个问题，这是我迄今为止发现的。 我打算把它作为自己的问题发布，但是认为它会被重复封闭。
在运行固定的Web应用程序的iOS8设备上。 关于标签：
<meta name="apple-mobile-web-app-status-bar-style" content="black">
从苹果开发人员的参考 ：
如果内容设置为默认，状态栏显示正常。 如果设置为黑色，状态栏的背景为黑色。 如果设置为黑色半透明状态栏是黑色半透明的。 如果设置为默认或黑色，Web内容显示在状态栏下方。 如果设置为黑色半透明，Web内容将显示在整个屏幕上，部分被状态栏遮挡。 默认值是默认值。
要启用此function，您需要使用
<meta name="apple-mobile-web-app-capable" content="yes">
在iOS6和7中，这个工作或多或less按预期工作。
在iOS8中，这似乎完全被打破 。 例如，在iPad Air上纵向运行的iOS 8.0.2具有以下行为：
-
black导致透明背景。 屏幕底部有一个黑色条 -
default或不设置值会导致透明背景和屏幕底部的白色条 -
black-translucent结果在一个透明的背景，但没有讨厌的酒吧在屏幕的底部
在所有情况下，内容都显示在栏的“下方”。 即酒吧不推动内容。
在iPhone6上，状态栏根本不会在横向上显示。 然而，在肖像中，以下行为：
-
black按预期工作，内容被压低（哇!!!） -
default在顶部有一个空的白色条 -
black-translucent结果在透明的背景下，内容在下面
我没有机会在iPhone6 +上testing
xcode中的iOS模拟器似乎不能可靠地再现真实设备上发生的行为。
我试图用javascriptdynamic地改变它，但它似乎没有效果。
只是为了使这个更有趣/令人沮丧，你可以通过设置html元素的样式覆盖状态栏（时钟/ wifi等）。 例如
html {background: black;} body {background: #DDD; margin-top: 20px}
其他地方也有同样的问题：
这个问题自iOS6以来就存在。 我之前曾经发布过苹果的bug报告，其中包含您今天提供的所有详细信息，后来被标记为重复。 这是2年前，不幸的是，今天我发现它甚至是最糟糕的。
原始的错误报告有ID 11966202，仍然是（打开）。 既然你有同样的问题，你唯一可以做的就是确认会升级它的错误，并且将来会修复它。
正如我所说，我正在寻找更多的解决scheme，足以告诉你没有解决方法。 这个问题可以在所有的iOS设备上重现，但是根据屏幕大小和方向的不同而有所不同。
在iOS 8中，我们现在遇到了一个小问题，即视口只是屏幕的一小部分，并完全closures/崩溃。
编辑：苹果票现已closures
截至周一，苹果已经closures了票，我可以确认，使用8.1终于解决了我的相机和状态栏问题。 希望它解决了你的问题:)
这个问题来自于使用<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状态栏图标。
苹果在iOS 8.3 beta 1中修复了这个bug
为了扩展以上所有，我的解决scheme是：
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
然后为所有需要向下移动20px的元素创build一个自定义CSS，特别是任何position: fixed; top: 0px; position: fixed; top: 0px; 它存在于你的CSS中，用于普通浏览器[desktop / mobile]视图。
将自定义CSS添加到头部分，在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>
我的结果是桌面/手机浏览器的网站视图是一样的，然后网站添加到主屏幕作为一个Web应用程序，在启动时打开全屏，状态栏看起来像它用来预先ios8 [fyi，我添加了黑色的背景颜色我的固定头状态栏的CSS显示为黑色背景
在运行ios 8.0.2的iPad / iPhone / iPod上testing – 都很好。 仅供参考，在旧iPod ios 6.1.6上进行了testing，预计会有20px的额外下移，并不在那里 – 奖金！
值得注意的是，只要您在iPad中以纵向方式打开Web应用程序，将状态栏样式设置为“黑色”就能按预期工作。 那么即使您旋转iPad，黑条也能正确显示。
问题只有当你在横向上进入Web App时，至less对我而言。 我使用的是带有IOS 8.1的iPad 3，我相信它在8.3中仍然是一样的
只需在应用程序的顶部添加一个20像素的高分区，并将其作为状态栏
在iOS 8中，apple-mobile-web-app-status-bar-style是不活动的。如果你在顶部添加一个固定的div，只添加OS 8_0
if (navigator.appVersion.indexOf("OS 8_0 like Mac") > 0) ...
