| Issue 26: | iScroll example pages overlap with status bar in full-screen | |
| 1 person starred this issue and may be notified of changes. | Back to list |
(iScroll 3.6 on iPad running iOS 3.2 and iPhone 4 running iOS 4.0.1) Steps to reproduce: 1. Go to one of the examples included with the iScroll code. 2. Add to home screen. Load from home screen (should take up full screen). 3. The header overlaps with the status bar. If I add margin-top: 20px; to the body, the status bar and header no longer overlap in full-screen mode, but then it looks wrong when viewing the page normally in Mobile Safari.
Sep 5, 2010
#1
jvcreati...@gmail.com
Sep 5, 2010
That's to be expected. Opaque status bar styles (normal, black) sit above the page. The black translucent style sits over the page, with 20px of content behind it. Nothing to do with iScroll.
Sep 5, 2010
(No comment was entered for this change.)
Status:
Invalid
Sep 6, 2010
I thought that might be the case. Is there a way to detect the full-screen mode and add the 20px margin automatically?
Sep 6, 2010
Yes. Its a property of navigator I think. Try Googling 'safari iPhone is web app fullscreen' I think you can choose the style of status bar with a Meta tag too :)
Sep 6, 2010
Thanks. This article was helpful: http://www.bennadel.com/blog/1950-Detecting-iPhone-s-App-Mode-Full-Screen-Mode-For-Web-Applications.htm |