Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch

Question

I don\'t believe there is any solution to hide bars programmatically using javascript/css/html, but let me try to describe a problem. We are the team of mobile game develope

Answer 1

UPDATE: There is a meta property for fixing this currently in iOS7.1 Beta according to this forum post on the release notes.

<meta name="viewport" content="minimal-ui">

I have run a test and can confirm this feature is currently in Beta 2.

Answer 2

Update: iOS7.1 has now been released so the NDA has lifted.

<meta name="viewport" content="minimal-ui">

Is indeed the correct tag and works in the live release. Remember that "viewport" can support a comma separated list if you require.

I combine it with other mobile variables to make the website feel like an app:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui">

-

We have been struggling with this one too. We have a TabBar on our site and every time you attempt to click a tab safari controls pop up.

Today hope. If you are a member of the apple developer program, I would strongly suggest visiting this forum: https://devforums.apple.com/message/927476

W

Answer 3

This solution worked for me, but in my case, the webapp was for a private public, where I had control of the Ipad that would be used.

I tried to use all possible meta tags and hacks, and really, after IOS8 have removed the minimal-ui feature, was practically impossible to solve.

Thinking outside the box, our team reached a nice solution:

The Mercury browser opens in fullscreen, and even when pages are being charged, the address bar does not appear. It is a small icon on the bottom right and only :) It worked perfectly for our problem!

But I repeat: do not use it if you are developing a webapp for the public in general. It's terrible for the UX force your user to download a different browser to access the app.

UPDATE

A developer friend of mine came up with this solution:

Use a webview inside of Titanium from appcelerator. It won't be aproved on Apple store, but for a private event, it'll work just fine!

Answer 4

Hopefully this helps someone, but I didn't want to set my viewport width=device-width.. because its 480px on iphone 4.. and I want my game to be at 800px for all devices.

And if you don't set it, then minimal-ui doesn't register.

My work around is doing:

<meta name="viewport" content="width=device-width, minimal-ui">

And then changing the viewport once the page is loaded:

  $(window).load(function(){
    $('meta[name=viewport]').attr('content','width=800, maximum-scale=1')
  });

I'm pretty shocked it works. The address bar and lower UI buttons only appear if the user clicks the top/bottom of the screen. Love it now.

Answer 5

EDIT 2:

Does not work since iOS 7.1

EDIT:

Some games have adopted an overlay that hints the player to scroll away the bars and then locks scrolling until bars pop out again. In this case position: fixed helps a lot, as it stabilizes the movement (can't explain it better, just have to try it for yourself). This game is a good example of such approach:

www.paf.com/mobile/launch/flowers.html (sorry, can't post more than 2 links)

Recently I have also stumbled upon a hack that deactivates navigation bar triggering for the top area. All you have to do is add a random element to your DOM with following styles:

z-index: 100000; /* should be bigger than everything else */
position: fixed;
overflow: scroll;
-webkit-overflow-scrolling: touch;

Read more about it here.

Answer 6

If you are creating a web-app, you can create a link to the URL from the home screen; and use the following HTML Meta Tags:

<!-- Allows fullscreen mode from the Homescreen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Sets the color of the text/battery, wireless icons etc -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

This will super-impose the indicators over your header/nav bar. (The indicators you see on all the iPad screens.

For more info, see: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html