logo标签列表

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

htmliosmobileios8
39

设置meta标签时

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的一个bug，但苹果似乎不关心我的错误报告 :(

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

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

更新2： 该问题已在iOS 8.3 Beta 1中得到修复。

这个问题在iOS7中也存在。我认为这是因为当照片滚动应用程序打开（选择文件）时，它内部有代码将该栏设置为黑色并覆盖了您从元标记中设置的内容。不幸的是，除了按主屏幕按钮并从图标重新进入应用程序之外，我不知道如何解决这个问题。 - FunkyMonk91
1
@FunkyMonk91，我无法在我的iOS7 iPad3上重现此问题。它只会在iOS8上发生。顺便说一下，iOS8 GM现在是iOS8的最终版本 :-( - aLiEnHeAd
在iOS 7上绝对没有遇到过这个（完全相同的）问题。今天在新安装的iPad上看到的第一件事就是这个。还有其他一些问题，例如滑动事件不再起作用，但仅限于主屏幕使用，而不是常规浏览器。 :-( - Garavani
3
似乎如果您在竖屏模式下启动Web应用程序，然后转为横向模式，它将正常工作。在iOS8.0 Safari中进行了测试。 - Kimmo
在我的iOS 11.3的iPhone SE上，我似乎有类似的问题。当我使用black栏，并在横向的一侧启动快捷方式时，没有状态栏。但是，一旦我旋转并让方向变为纵向，状态栏就会被添加。回到横向，现在有一个黑色的栏，可以有一个状态栏，但它是空的。 - luckydonald
关于iOS 11，还可以参考https://dev59.com/06bja4cB1Zd3GeqPgG0f。 - luckydonald
8个回答
35

从技术上讲，这不是对你的问题的答案，但我一直在记录自己尝试解决此问题时发现的情况，以下是到目前为止的发现。我本来想把它作为自己的问题发布，但认为它会被关闭为重复。

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

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

来自苹果开发者参考文献：

如果将 content 设置为 default，则状态栏显示正常。如果设置为 black，则状态栏具有黑色背景。如果设置为 black-translucent，则状态栏是黑色和半透明的。如果设置为 default 或 black，则网页内容在状态栏下方显示。如果设置为 black-translucent，则网页内容在整个屏幕上显示，部分被状态栏遮挡。默认值为 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}

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

1
感谢您提供详细的说明。我在iPad Air横屏模式下也遇到了完全相同的问题。 - theabraham
2
这让我疯狂了。 - Mati
7
该问题自iOS6以来就存在。 我之前已向苹果的错误报告提交了所有您今天提供的详细信息，并被标记为重复。这是两年前的事情，不幸的是今天我发现它变得更糟了。
原始错误报告的ID是11966202，仍然处于（打开）状态。 既然您也遇到了同样的问题，唯一能做的就是确认该错误，这将升级它并在未来修复它。
正如我所说，我正在寻找解决方案，但很遗憾告诉您，没有解决方法。 这个问题可以在所有iOS设备上重现，但根据屏幕大小和方向表现不同。
在iOS 8中，我们现在遇到一个故障，即视口变成屏幕的一个非常小的部分，然后完全关闭/崩溃。
编辑：苹果票务现已关闭
截至周一，苹果已关闭了该票务，我可以确认使用8.1最终解决了我遇到的相机和状态栏问题。希望它也解决了您的问题 :)
2
我注意到当你在横屏模式下打开WebClip时，屏幕底部会多出20像素的空白区域，而且无法填充。苹果在最新版本的iOS中完全破坏了状态栏的行为。 - Gapipro
2
我在iPad mini和iOS 8.1上仍然无法解决问题。横屏和竖屏模式都还是有问题。 - andig
5
问题出现在使用 <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 状态栏图标。
2
还有一点我没提到，为了使这个解决方案生效，你必须从主屏幕中删除你的 Web 应用并重新添加。 - DrumJammer
1
谢谢这个提示。至少底部的黑色条消失了。但现在我有一个透明的顶部状态栏，我不喜欢。要么是黑色的，要么就没有。但透明的对我来说很糟糕。我想知道为什么每个新版本的软件，不是保留好的东西并开发坏的东西，而是总是带来一堆新的看不见的问题，在以前没有任何问题的地方？这让我感到恶心。更不用说这个更新带来的糟糕的Safari 7.1了... - Garavani
3

苹果已经在iOS 8.3 beta 1中修复了这个漏洞。

2
为了更详细地说明上述内容，我的解决方案是：
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

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

将自定义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应用程序，在启动时全屏打开，状态栏看起来像以前的iOS 8之前的样子[提示：我在我的固定标题CSS中添加了黑色背景颜色，以便状态栏显示为黑色背景]。
在运行iOS 8.0.2的iPad/iPhone/iPod上进行了测试 - 一切正常。提示：在旧版iPod iOS 6.1.6上进行了测试，期望会额外向下移动20px，但没有出现 - 意外惊喜！
3
你能否创建一个包括你的CSS的JS Fiddle？ - Janey
1
值得注意的是，只要您在肖像模式下使用iPad打开Web应用程序，将状态栏样式设置为“黑色”就能按预期工作。然后，即使您旋转iPad，黑色栏也会正确显示。问题仅出现在我进入横向模式的Web应用程序时。我使用的是iOS 8.1的iPad 3，并且我相信在8.3中仍然是这样。
0
只需在应用程序顶部添加一个高度为20像素的div，并让它充当状态栏即可。
哈哈哈，我等了这个答案！太好了。 - Garavani
3
在顶部添加一个20像素高的div是没有帮助的，因为当你在横向模式下启动应用程序时，你会得到一个破碎的视口，在屏幕底部有20像素的空白区域，无法填充任何内容。因此，如果你有一个固定的底部菜单，它将漂浮在空间中，并有一个白色的条形框在其下面。 - Gapipro
0

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

if (navigator.appVersion.indexOf("OS 8_0 like Mac") > 0) ...
请注意，此检查不适用于8.1版本...最好使用用户代理解析器并检查版本>=8（在修复此问题之前 - 如果有的话）。 - Simon Lang
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接