1

Is it possible to hide (completely remove, not change the styling) the iOS Safari status bar in a homescreen web app?

When you browse a webpage in Safari in a landscape mode the status bar disappears together with the rest of the browser chrome after starting to scroll.

The web app that I'm adding to the homescreen if fitted to the size of the display so is no scrollable.

After setting:

<meta content='initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<meta content='yes' name='apple-mobile-web-app-capable'>
<meta content='white-translucent' name='apple-mobile-web-app-status-bar-style'>

All the browser chrome is gone, but the status bar information is still overlaid over the top of the page regardles of the screen orientation. Is it possible to hide it?

mrt
  • 1,669
  • 3
  • 22
  • 32

1 Answers1

0

There is no direct method for this (see: similar question) but... this link seems promising:

The summary of the link is as below:

Key Comments (at link):

When viewing sites in Safari you do not have the ability to customize the status bar in any way. Previous versions of iOS offered the ability to view sites in full screen mode, but that was removed in iOS7, see
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review.

Key Notes (in link):

StatusBar Cordova Plugin

With iOS7 Apple introduced some native Objective C APIs to control the status bar. Because of Cordova, we have the ability to bridge these native APIs directly into JavaScript APIs.
Luckily for us @shazron has already done this with the StatusBar plugin.

After adding the plugin to your application, you are given a StatusBar object with a number of methods to manipulate the status bar in JavaScript directly.
...
You can hide the status bar using StatusBar.hide(), or even change its background color with StatusBar.backgroundColorByName() or StatusBar.backgroundColorByHexString().
For example, the following sets the status bar to green.

<script>      
    document.addEventListener('deviceready', function() {
        StatusBar.overlaysWebView(false);
        StatusBar.backgroundColorByName('green');
    }, false);
</script>

...
Outstanding Issues

While the web has come up with workarounds for most of the iOS7 status bar issues, there are still a few that remain unresolved.

  • The status bar still overlays content displayed in a cordova InAppBrowser. There is no known workaround, but a fix is slated for cordova 3.2.
  • The StatusBar plugin does not work in apps that lock the device into landscape mode.

Key Critic Comment (at link):

These solutions seem to be working only for Phonegap applications, for us who don't use this and simply wrap our apps in a webview it seems the only easy solution is to set the webview's top property to 20 instead of zero and that takes care of the issue at hand.

Community
  • 1
  • 1
staticVoidMan
  • 19,275
  • 6
  • 69
  • 98