Html iOS 8：Web 应用程序状态栏位置和调整大小问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25884806/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS 8: web app status bar position and resizing problems
提问by aLiEnHeAd
When setting the meta tags
设置元标记时
apple-mobile-web-app-capable
and
和
apple-mobile-web-app-status-bar-style
to create a full screen web app, the iOS status bar is at the top of the screen (translucent) and there's an additional empty black bar at the bottom.
要创建全屏 Web 应用程序，iOS 状态栏位于屏幕顶部（半透明），底部有一个额外的空黑条。
Here's my code:
这是我的代码：
<!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>
There's an additional problem with the tag apple-mobile-web-app-status-bar-style. After taking and accepting a photo via camera input black bars appear on the sides of the screen.
I'm using iOS8 GM on an iPad3.
标签还有一个问题apple-mobile-web-app-status-bar-style。通过相机输入拍摄并接受照片后，屏幕两侧会出现黑条。我在 iPad3 上使用 iOS8 GM。
I think this might be an iOS 8 bug but Apple doesn't seem to care about my bug report :(
我认为这可能是 iOS 8 的错误，但 Apple 似乎并不关心我的错误报告:(
Does anyone know a solution/workaround for this problem?
有谁知道这个问题的解决方案/解决方法？
Update 1:Apple marked my bug report as Duplicate (Closed) on Sept. 19th.
更新 1：Apple 于 9 月 19 日将我的错误报告标记为重复（已关闭）。
Update 2:Bug is fixed in iOS 8.3 Beta 1
更新 2：错误已在 iOS 8.3 Beta 1 中修复
采纳答案by aLiEnHeAd
Apple fixed this bug in iOS 8.3 beta 1
Apple 在 iOS 8.3 beta 1 中修复了这个错误
回答by captainclam
Technically this is not an answer to your question, but I have been documenting my findings while trying to resolve this issue myself, and here is what I've found so far. I was going to post it as it's own question, but figured it would be closed as a duplicate.
从技术上讲，这不是您问题的答案，但我在尝试自己解决此问题时一直在记录我的发现，这是我迄今为止所发现的。我打算将它作为自己的问题发布，但认为它会作为副本关闭。
On iOS8 devices running pinned web applications. Regarding the tag :
在运行固定 Web 应用程序的 iOS8 设备上。关于标签：
<meta name="apple-mobile-web-app-status-bar-style" content="black">
From the Apple developer reference:
来自Apple 开发人员参考：
If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar. The default value is default.
如果内容设置为默认，状态栏显示正常。如果设置为黑色，则状态栏具有黑色背景。如果设置为黑色半透明，则状态栏为黑色半透明。如果设置为默认或黑色，则 Web 内容显示在状态栏下方。如果设置为黑色半透明，则 Web 内容会显示在整个屏幕上，状态栏会部分遮挡。默认值为 default。
To enable this functionality, you need to use
要启用此功能，您需要使用
<meta name="apple-mobile-web-app-capable" content="yes">
In iOS6 and 7 this works more or less as expected.
在 iOS6 和 7 中，这或多或少按预期工作。
In iOS8 this appears to be broken entirely. For example, iOS 8.0.2 running on an iPad Air in portrait has the following behaviour:
在 iOS8 中，这似乎完全被打破了。例如，在 iPad Air 纵向运行的 iOS 8.0.2 具有以下行为：
blackresults in a transparent background. There is a solid black bar at the bottom of the screendefaultor not setting a value results in a transparent background and a solid whitebar at the bottom of the screenblack-translucentresults in a transparent background, but no annoying bars at the bottom of the screen
black结果是透明的背景。屏幕底部有一个实心黑条default或不设置值会导致透明背景和屏幕底部的纯白条black-translucent导致背景透明，但屏幕底部没有烦人的条
In all cases, the content appears "beneath" the bar. i.e. the bar does not push content down.
在所有情况下，内容都显示在栏“下方”。即栏不会向下推内容。
On an iPhone6, the status bar does not display at all in landscape. In portrait however, the following behaviour:
在 iPhone6 上，状态栏根本不会横向显示。然而，在肖像中，以下行为：
blackworks as expected, and content is pushed down (wow!!!)defaulthas an empty white bar at the topblack-translucentresults in a transparent background, with content underneath
black按预期工作，内容被推下（哇！！！）default顶部有一个空的白色条black-translucent导致透明背景，下面有内容
I have not had the opportunity to test on an iPhone6+
我还没有机会在 iPhone6+ 上进行测试
The iOS simulator in xcode does not appear to give reliable reproduction of the behaviour that occurs on real devices.
xcode 中的 iOS 模拟器似乎无法可靠地再现真实设备上发生的行为。
I have tried changing it dynamically with javascript, but it appears to have no effect.
我尝试使用 javascript 动态更改它，但它似乎没有效果。
Just to make this even more interesting/frustrating, you can COVER the status bar (clock/wifi etc) by setting styles on the html element. e.g.
为了让这更有趣/令人沮丧，您可以通过在 html 元素上设置样式来覆盖状态栏（时钟/wifi 等）。例如
html {background: black;}
body {background: #DDD; margin-top: 20px}
The same issue documented elsewhere:
其他地方记录了相同的问题：
回答by HEDWIN
The problem existed since iOS6. I had previously posted to Apple's bug report with all details you are providing today, and later was marked as duplicate. This was 2 years ago and unfortunately today I discovered that it got even worst.
这个问题从 iOS6 开始就存在了。我之前曾将您今天提供的所有详细信息发布到 Apple 的错误报告中，后来被标记为重复。这是 2 年前，不幸的是，今天我发现情况变得更糟。
The original bug report has id 11966202 and is still (Open). Since you have the same problem the only thing you could do is confirm the bug which will escalate it and they will fix it in the future.
原始错误报告的 ID 为 11966202，并且仍然是 (Open)。由于您遇到了同样的问题，您唯一能做的就是确认会升级它的错误，他们将在将来修复它。
As I said I am looking for a solution for more that enough to tell you there is no workaround. The problem can be reproduced on all iOS devices, but behaves differently based on the screen size and orientation.
正如我所说，我正在寻找一个解决方案，足以告诉您没有解决方法。该问题可以在所有 iOS 设备上重现，但根据屏幕大小和方向的不同表现不同。
With iOS 8 we now experience a glitch where the viewport becomes just a very small portion of the screen and it closes/crashes completely.
在 iOS 8 中，我们现在遇到了一个小故障，即视口只是屏幕的一小部分，它会完全关闭/崩溃。
EDIT: Apple Ticket is now closed
编辑：Apple Ticket 现已关闭
As of Monday, Apple had closed the ticket and I can confirm that using 8.1 finally resolves the camera and status bar issues I was having. Hope it resolved your issues too :)
截至周一，Apple 已关闭票证，我可以确认使用 8.1 最终解决了我遇到的相机和状态栏问题。希望它也解决了您的问题:)
回答by DrumJammer
The issue comes from using <meta name="apple-mobile-web-app-status-bar-style" content="black">In order to get rid of the black bar at the bottom of your app, you will need to use:<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">Using black-translucent will keep your app looking the same in both iOS7 and iOS8. You will still need to adjust any content at the top of your app to clear the iOS status bar icons.
问题来自使用<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 状态栏图标。
回答by user1762289
To expand on all of the above, my solution is:
为了扩展以上所有内容，我的解决方案是：
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Then create a custom CSS for all the elements that need to shift down by 20px, particularly any position: fixed; top: 0px;that exists in your CSS for normal browser [desktop/mobile] view.
然后为所有需要向下移动 20px 的元素创建一个自定义 CSS，特别是position: fixed; top: 0px;那些存在于普通浏览器 [桌面/移动] 视图的CSS 中的元素。
Add the custom CSS into the head section, below CSS links with the following script [my working example]
将自定义 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>
My result is desktop/mobile browser website view is as normal, then website added to home screen as a web app, on launch opens fullscreen, with status bar looking like it used to pre ios8 [fyi, I added a background color of black to my fixed header css for the status bar to show as black background
我的结果是桌面/移动浏览器网站视图正常，然后网站作为网络应用程序添加到主屏幕，在启动时打开全屏，状态栏看起来像以前的 ios8 [仅供参考，我添加了黑色背景色我的状态栏固定标题 css 显示为黑色背景
Tested on iPad/iPhone/iPod running ios 8.0.2 - all good. FYI, tested on old iPod ios 6.1.6 expecting an extra shift down of 20px and wasn't there - bonus!
在运行 ios 8.0.2 的 iPad/iPhone/iPod 上测试 - 一切正常。仅供参考，在旧的 iPod ios 6.1.6 上进行了测试，预计会额外向下移动 20 像素，但没有 - 奖金！
回答by Sebris87
It is worth noting that setting the status bar style to 'black' is working as expected as long as you open the Web App with your iPad in Portrait. Then even if you rotate the iPad the black bar is correctly visible.
值得注意的是，只要您使用 iPad 纵向打开 Web 应用程序，将状态栏样式设置为“黑色”即可正常工作。然后，即使您旋转 iPad，黑条也是正确可见的。
The problem is only when you enter the Web App in landscape, at least for me. I am using iPad 3 with IOS 8.1, and I believe it is still the same in 8.3
问题仅在于您以横向方式输入 Web App 时，至少对我而言。我正在使用带有 IOS 8.1 的 iPad 3，我相信它在 8.3 中仍然相同
回答by Stephen O'Sullivan
Just add a 20px high div to the top of your app and let that act as that status bar
只需在应用顶部添加一个 20px 高的 div，然后让它充当那个状态栏
回答by Dux
apple-mobile-web-app-status-bar-style is inactive in iOS 8. If you add a fixed div on top, only add it for OS 8_0
apple-mobile-web-app-status-bar-style 在 iOS 8 中是非活动的。如果你在顶部添加一个固定的 div，只为 OS 8_0 添加它
if (navigator.appVersion.indexOf("OS 8_0 like Mac") > 0) ...
