How do I Hide the Safari Mobile Address Bars?

0 favourites
  • 3 posts
From the Asset Store
Make your game more fun and interactive with the Dog Hide and Seek Buttons Sprite Sheet.
  • 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?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 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.

  • Understood. Thanks very much.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)