{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
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
To expand on all of the above, my solution is:
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.Add the custom CSS into the head section, below CSS links with the following script [my working example]
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
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!