html - iOS 8: web app status bar position and resizing problems

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

html - iOS 8: web app status bar position and resizing problems

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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.

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.

I think this might be an iOS 8 bug but Apple doesn't seem to care about my bug report :(

Does anyone know a solution/workaround for this problem?

Update 1: Apple marked my bug report as Duplicate (Closed) on Sept. 19th.

Update 2: Bug is fixed in iOS 8.3 Beta 1

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

262 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T17:44:36+0000

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 :

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

From the Apple developer reference:

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.

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.

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:

black results in a transparent background. There is a solid black bar at the bottom of the screen
default or not setting a value results in a transparent background and a solid white bar at the bottom of the screen
black-translucent results in a transparent background, but no annoying bars at the bottom of the screen

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:

black works as expected, and content is pushed down (wow!!!)
default has an empty white bar at the top
black-translucent results in a transparent background, with content underneath

I have not had the opportunity to test on an iPhone6+

The iOS simulator in xcode does not appear to give reliable reproduction of the behaviour that occurs on real devices.

I have tried changing it dynamically with javascript, but it appears to have no effect.

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 {background: black;}
  body {background: #DDD; margin-top: 20px}

The same issue documented elsewhere:

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

Categories

html - iOS 8: web app status bar position and resizing problems

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags