3

When I add the Nibbble web app to my iPhone home page, it not only installs an icon, but when run, also hides all of the mobile Safari chrome.

How does it achieve this?

Improve this question
1
  • Good answer from @zevlag but this probably belongs on StackOverflow.com
    – conorgriffin
    Commented Feb 3, 2011 at 22:02

1 Answer 1

Reset to default
5

You only need the first part of this code to do what you ask, but the rest may also be helpful.

// hide the browser chrome
<meta name="apple-mobile-web-app-capable" content="yes" /> 

//set the phone status bar style; can be grey, black, or black translucent
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

// set the viewport for iOS
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />

// set a custom icon for when a user bookmarks the app to the home screen
<link rel="apple-touch-icon" href="/path/to/icon.png" />
Improve this answer
1
  • Why is maximum-scale=0.6667 ? Don't we need also initial-scale=1.0 here ?
    – svassr
    Commented Oct 17, 2013 at 19:58

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .