{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 聊天终结者 的问题《iOS 8: web app status bar position and resizing pr》','https://www.manongdao.com/q-1187026.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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
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.Apple fixed this bug in iOS 8.3 beta 1
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.
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.
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.
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.
EDIT: Apple Ticket is now closed
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 :)
Just add a 20px high div to the top of your app and let that act as that status bar
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.
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
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 :
From the Apple developer reference:
To enable this functionality, you need to use
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:
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 white bar at the bottom of the screenblack-translucentresults in a transparent background, but no annoying bars at the bottom of the screenIn 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:
blackworks as expected, and content is pushed down (wow!!!)defaulthas an empty white bar at the topblack-translucentresults in a transparent background, with content underneathI 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.
The same issue documented elsewhere: