I want my site not to display the address bar when viewed in iPhone's safari. From my research this metatag should do the trick, if only targeting iphone devices:
<meta name="apple-mobile-web-app-capable" content="yes" />
it doesnt seem to do the trick when I'm testing on 4S.
also tried
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width" />
Does anything else need to be done?
The apple-mobile-web-app-* meta tags you refer to in your question only apply when a user adds your web application to their home screen, after which they can click on the icon and it appears to be a native app (even though it is not).
As long as your application is being accessed inside Safari on the device, the Safari chrome will appear.
Related
I want to make a simple webpage with a JavaScript game look like an app on the iPhone. I know I can save a bookmark to the homescreen and that looks like an app and I know I can set the apple-itouch-image for the thumbnail in my HTML. But when you click on the app on the homescreen, it's clear this is just a webpage. How can I get rid of the URL and search bar at the top like Google Reader does? It's fine to see that bar if you later scroll up.
Is it possible to dive right into full-screen mode when the webpage is clicked?
I'm not looking for anything like PhoneGap, I just want to make a simple webpage with JavaScript look like an app, I don't want it to actually be an app.
You can put some meta tags in your head block of the page. Try these:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
viewport sets width and controls scaling and zooming.
apple-mobile-web-app-capable informs the Apple iOS that the application can be installed to the users springboard so that it starts the Safari Mobile browser without a menu bar
apple-mobile-web-app-status-bar-style controls the look of the thin status bar at the top of the screen.
Another useful line is:
<link rel="apple-touch-icon-precomposed" href="myicon.png"/>
Which will give the app a custom icon once installed.
You need to define a few <meta> tags, most notably apple-mobile-web-app-capable. See a full tutorial here http://mobile.tutsplus.com/tutorials/iphone/iphone-web-app-meta-tags/
Add
<meta name="apple-mobile-web-app-capable" content="yes" />
Then it should work after it was saved to homescreen.
I am using the StageWebView Class to show html pages inside my iOS app. Everything is working fine except for the scrolling. It allowing the end-user to scroll the entire webview and is showing an unsightly gray background after reaching the end of the pages content.
My question is: Is there a way to disable the scrolling past the content of the page?
I don't think there's a way to do what. The StageWebView uses the iOS default browser which implements this feature (with a different background color, the behavior is the same though).
Did you try with this viewport?
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The important part is user-scalable=no which should remove the "scroll bounce" of the iOS browser.
I currently build an in-house webapp (a telephone directory) with jQuery Mobile. I put the phone numbers in a link: call me
This works great. Once you hang up, you get back to the home screen (normal behavior for webapps). BUT: If you start the phone app, the iPhone crashes. The phone app does not open, the status bar will light up and everything is slowly increased. Sometimes the screen goes black and you must restart the iPhone. Workaround: double-clicking the homebutton and chose another multitask app. Then again, everything is normal.
After thousands of attempts, I've come to the conclusion that the problem appears ONLY on the fullscreen mode:
<meta name="apple-mobile-web-app-capable" content="yes" />
Leaving this off and opens the webapp with the Safari interface: no problems.
I've Been looking into the vastness of the internet for the problem, but somehow I seem to be the only one ...?
We tested on an iPhone 4 and an iPhone 4S. Both with the latest iOS version.
You can also try it out: www.gopeter.de/tel - put the app to your homescreen/springboard, phone 0000 and hang up immediately. Thereafter, the normal "phone" app stop working ...
Source code of this page is only:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Anrufen</title>
</head>
<body>
call me
</body>
</html>
So I've only seen one website do this and I'm very curious to know how they do it. I'm using an iPhone 4 with iOS5 by the way.
Go to http://m.funnyordie.com/ (Will Ferrell's sketch comedy site) on mobile Safari, add it to the homescreen, and then click on the homescreen icon that was just added.
The mobile site shows up without any of the Safari buttons or address bar. It even shows up in the open app tray as an open stand-alone app (double-tab the home button to see what I mean when Funny or Die isn't in the foreground).
You can navigate the videos on the page and even search, but when you click one of the other tabs (Most Viewed, FoD Exclusives) it takes you to the Safari app for a new tab.
I've never seen anyone else do this and I'm very curious to know how they do this. Anyone know?
It's called a Web Clip and if you specify some meta data in your html you can have it appear on the home screen with an icon
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
To add an icon:
<link rel="apple-touch-icon" href="/custom_icon.png"/>
To have a startup image:
<link rel="apple-touch-startup-image" href="/startup.png">
To hide the navigation bar:
<meta name="apple-mobile-web-app-capable" content="yes" />
To change the status bar appearnace:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
(Note: on iOS 15, the method above won't work according to: https://developer.apple.com/forums/thread/683403)
To change the status bar appearnace on iOS 15:
<meta name="theme-color" content="#ecd96f">
Also for information it seems they are using jQueryMobile pretty heavily (jquerymobile.com) which I think can do a lot of all that for you.
anone knows how to remove the bar at the top and bottom on safari iphone. I have this mobile web page am writing and I cannot get rid of the navigation bar. Is that even possible ?
Thanks.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<!-- this is the part responsible for hidding the bottom bar -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
The only issue is that it works only after the user have saved the link to their iphone desktop.
Hope this solves your problems.
You can't remove the bars from the top and bottom of the Safari app. I've seen apps that embed Safari in them without the two bars, but you couldn't do this using Javascript or a metadata tag in your page.
UPDATE
There is trick that lets you hide the address bar by scrolling the page. Something like this:
<script type="application/x-javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){
window.scrollTo(0,1);
}
</script>
You can include <meta name="apple-mobile-web-app-capable" content="yes" /> in the header.
This will remove the two bars when the app is bookmarked on the springboard.
If you want to remove the top bar in mobile Safari, use the code Am posted.