What does
<meta name="apple-mobile-web-app-status-bar-style" content="black">
do -- can someone explain with an example?
I found this line in the official Safari Developer Library
This meta tag has no effect unless you
first specify full-screen mode as
described in “url.”
But which url?
What is the benefit of this meta tag?
First, the apple-mobile-web-app-capable hint has to be set for that to even work. This hint causes a web application to run in full-screen mode: it removes the address bar and navigation buttons you get by default in Mobile Safari. The removed areas are highlighted in red here:
So, once an app is in full-screen mode (i.e. the user has added the website to their home page), you can also control the colour of the remaining thin status bar at the top of the page with apple-mobile-web-app-status-bar-style, highlighted in red here:
Per the docs:
If content is set to default, the status bar appears normal. If set to black, the status bar has a black background. If set to black-translucent, the status bar is black and translucent. If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.
A couple of caveats:
This only works on the first page you load; any navigation away to another page will make the address bar and navigation buttons reappear. So if you want this to work, you have to build a single page website (for multiple 'pages' consider an Ajax page loading approach such as that used in the jQuery Mobile framework).
This only works when you arrive at the web page via an application shortcut icon; if you navigate to the website directly from within Mobile Safari it has no effect.
It changes the top bar w/ the banner and carrier on it and makes it a translucent black.
Related
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?
There is no direct method for this (see: similar question) but... this link seems promising:
Everything Hybrid Web Apps Need to Know About the Status Bar in iOS7
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.
I want the address bar to disappear on the iPhone. So far I have used:
window.scrollTo(0, 1);
This hides the address bar when the page is first loaded.
Then I have
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
This prevents the user from scrolling back up to the address bar (or anywhere else) while still allowing buttons to be tapped.
But, the address bar still appears when I tap the top of the page. Not sure if this is because I am touching the top of the webpage or because I am touching the bar with the clock and battery.
I'm guessing that the user himself would need to set this option on his phone, although it would be nice if I could control it via the webpage. Is either way possible?
Why? I want to make a web app for a disabled child who has a hard time controlling his movements. I essentially want to turn off any touch actions that aren't related to the web app itself. Otherwise he will accidentally set off lots of unwanted actions. Not sure if this is possible.
I'm afraid you can't hide the status bar. For example in iOS 6 you can, in landscape mode, go full screen, it hides the status bar, but there is a new button at the bottom right of the screen to leave the full screen mode.
What you are asking is not achievable within Safari. But you can develop a simple application full screen (no adress bar, no buttons, no status bar) with a simple UIWebView. This way there will not be any unwanted action.
I need the lightblue bar to scroll up (hide) and display the Facebook bar. For example look at this image.
I need the light blue bar (which contains the search bar, refresh button) to be scrolled up, so it hides and displays from the Dark Blue Facebook bar as shown in this image.
I have seen this in many applications but, how can i implement it in my application programatically ?
There's no way to control safari from your app, and since Facebook serves the HTML there's no way to alter that either. So to achieve what you're looking for you could create your own UIWebView and present it modally instead. The issue you'll have here, though, is that you won't have access to the users cookies, so they'll have to log in to Facebook again.
I've seen plenty of scripts on the web about hiding the address bar by scrolling down to hide it etc. But I noticed that Apple actually hide it completely as in make it disappear!
http://help.apple.com/iphone/5/interface/ on your iPhone you will see the bar removed...
How do I do this? Thanks
They're doing event.preventDefault() on the touchstart event and handling scrolling in their own code.
They're not removing it. It's behaving in the same way as every other webpage does in Mobile Safari. The difference appears to be in the way they're displaying the page itself. If you tap on the Status Bar while looking at that webpage the navigation bar appears for you.
I switched my useragent on Safari to Mobile Safari and it looks like they're not actually scrolling the page when you swipe, but have a div setup with overflow:hidden; and you're scrolling inside that div instead of the page itself.
(Edit: This appears to be in addition to hiding the bar by scrolling down the page)
To hide the address bar, use jQuery and execute the following on document load:
jQuery(function($) {
$('html,body').scrollTop(0)
};
The address bar will disappear and will reappear only if the user touches the screen to make it reappear.
I am using UIWebView to provide a simple browser in an app. When I go to Wikipedia the search bar at top of the page (mobile version) is never shown in the UIWebView. Scrolling down and back up does not make it visible.
I tried both cases (YES/NO) for scalesPageToFit but did not do anything.
The problem is that Wikipedia is reading the user agent string and deciding not to show the search bar. (UIWebView's user agent is slightly different than mobile Safari's user agent.) Unfortunately, it looks like you cannot change the user agent string used by UIWebView.