How do I Hide the Safari Mobile Address Bars?

Get help using Construct 2

Post » Fri Dec 12, 2014 7:34 am

Safari mobile seems to ignore the browser object's Request Fullscreen action and, in turn, ignores the Lock Orientation action as well. So, when loading up any C2 game exported as an HTML5 website on an iPhone you get an address bar at the top and a bar with other options at the bottom, which combine to obscure the heck out of my game and make it unplayable.

Switching orientations by rotating the phone will temporarily hide the bars, but this isn't particularly useful since touching anywhere near the top or bottom of the screen causes the bars to reappear. Moreover, my game is supposed to be locked to landscape orientation so rotating the phone as a "solution" shouldn't really be possible. I've setup some events that pause the game and instruct users to switch to landscape orientation if their device is in portrait mode, but I consider this an unprofessional workaround.

This isn't a problem in most browsers, nor is it a problem with native apps, but mobile browsers and Safari in particular seem to have constant issues with orientation locking and hiding address bars. Earlier this year there was a Safari-related bug that created a fixed gray bar across the bottom of the screen, for example. Occasionally I'll hear about a workaround or hack to bypass these issues, but then a new version of Safari or C2 hits and breaks everything again.

Does anyone know of a reliable way to: hide Safari's address bars, reliably request fullscreen and lock the orientation in Safari, and/or prevent the address bars from reappearing when touching near the top or bottom of the screen? Can I expect the solution to last or are we perpetually at the mercy of Apple's new iOS and browser versions which will inevitably break our fixes?
B
5
S
2
G
3
Posts: 16
Reputation: 1,007

Post » Fri Dec 12, 2014 5:13 pm

Apple do not support this in Safari 8. They did in Safari 7.1 with the "minimal-ui" viewport mode, which C2 uses, but they removed support for this in Safari 8, and have not added support for the Fullscreen API or orientation lock, so there is simply no alternative. I'm not aware of any HTML5 engine or framework that can do this, since as far as I can tell Safari simply does not support this at all. The only workarounds are try to stick to portrait mode (since landscape mode has big invisible areas that bring back the browser UI and generally get in the way of the game), or rely on 'Add to home screen' or publishing a native app. Hopefully a future version of Safari will add support for this.

It's not a problem with all mobile browsers though: Chrome for Android supports both 'Request fullscreen' and orientation locking. See fullscreen and orientation lock in browsers for more information.
Scirra Founder
B
398
S
236
G
88
Posts: 24,433
Reputation: 194,635

Post » Fri Dec 12, 2014 8:19 pm

Understood. Thanks very much.
B
5
S
2
G
3
Posts: 16
Reputation: 1,007


Return to How do I....?

Who is online

Users browsing this forum: jbr190, valefor and 31 guests

cron