How to hide Safari Mobile browser bottom button bar in iPhone?

iphone html css mobile-safari

59,440

Solution 1

You cannot programmatically hide the toolbar in Mobile Safari.

Your users need to add your web app to their home screens in order for the bars to be hidden when they next launch your app by tapping its icon. This is done by tapping the middle button in the toolbar, then choosing Add to Home Screen. You may need to display a message informing your users to do this.

Solution 2

For iOS 7.1, you can set this in your header to minimize the UI:

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

It was introduced in iOS 7.1 beta 2. This site was instrumental in helping me understand how minimal-ui works: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs

59,440

Author by

Awan

Upvoter

Updated on July 19, 2020

Comments

Awan almost 4 years

Following is head section:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <link rel="apple-touch-icon" href="/custom_icon.png"/>
    <link rel="apple-touch-startup-image" href="/startup.png">

    <script src="http://www.google.com/jsapi"></script>

    <script>
      window.top.scrollTo(0, 1);
      alert('ok');
      google.load("jquery", "1.4.1");
      google.load("jqueryui", "1.8.0");
    </script>

</head>

using iOS 4.2.1

Above is not working for me. Browser Address bar and bottom toolbar are still there. I have tried some tutorials but I am unable to change anything. Any idea?

Mazatec almost 12 years

even when my web app is fired from the home screen the bottom toolbar remains (the top one is hidden). Why does the bottom remain? I am using JQuery Mobile.
BoltClock almost 12 years

Refer to the code in the question. Pay attention to the meta tags.
Ross almost 11 years

Excellent advice - if your users are going to be using your site often, have them add as a webapp - works like a charm!
TV's Frank over 9 years

This only works for the page that you add to your homescreen though right? If you click a link and move to some other page on the same site the top and bottom bars appear again.
BoltClock over 9 years

@TV's Frank: Yes, which is why web apps need to handle navigation differently.
Hendrik over 7 years

This is no longer supported with IOS 8 onward.