Ask Different is a question and answer site for power users of Apple hardware and software. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question

migrated from Feb 3 '11 at 18:31

This question came from our site for power users of web applications.

Good answer from @zevlag but this probably belongs on – conorgriffin Feb 3 '11 at 22:02
up vote 5 down vote accepted

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" />
share|improve this answer
Good answer! +1 – conorgriffin Feb 3 '11 at 22:45
Why is maximum-scale=0.6667 ? Don't we need also initial-scale=1.0 here ? – svassr Oct 17 '13 at 19:58

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.