Make your webpage act more like an iOS App

If you're looking to make a webpage or entire site act more like a native iOS app by removing the status bar or removing the UI Components there's some really simple things you can do to get it done. To get started, copy/paste the following 7 lines of HTML into the <head> tag of your page.

Now I'll break down what each line does specifically.

<meta name="viewport" content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

This is going to make it so users cannot pinch to zoom in/out on your site. It also scales the site to fit into the width of the device. If you want to know the ins and outs of the viewport option read the official documentation.

<meta name="apple-mobile-web-app-capable" content="yes" />

This tells Safari to have it use the standalone mode to look more like a native application. This is going to hide the Safari User Interface Components meaning there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen.

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

This is sets the background color of the status bar to black.

<link rel="apple-touch-startup-image" href="/startup.png">

This is going to specify a startup image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used.

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

These are used when a user of your site saves a bookmark to one of your URLs to their iPhone's Desktop. It will download this icon and place it on their device as if it were an iOS App. Multiple sizes are to be used on the different iOS Devices. This results in the following look when a user goes to create a bookmark:

For a more in-depth look at the documentation check out the iOS Developer Library