Optimizing Full Screen Mobile Web App for iOS

If you want to set up Full Screen Web App for Android devices, please proceed to “Build Full Screen Mobile Web App For Android Chrome article”.

Recently, I’ve checked my Apache Server logs & found that, there are getting more people using the “Add to Home Screen” features on iOS Safari to create a shortcut to my web app right on their home screen.

The web app (website) already designed to be full screen without browser chrome (such as URL address bar), my users can launch the web app from their home screen and enjoy the full screen mode. But they will be transferred to Safari if they click on any links inside the full screen app. This could produce a very bad user experience for my users, as they suppose to enjoy my app in the full screen mode.

Luckily, I found some JavaScript solution to provide my users a seamless web app experience by keeping them in full screen mode without transferring them to Safari on every link they clicked.

In this post, I want to share you some techniques I’ve learned about how to optimize full screen web apps for iOS. You’re going to learn step by step on how to set the launcher icon, startup image, app name, full screen setting, and of course the most important features: seamless full screen mode user experience!

Step 1: Set the viewport

In order to deliver a great mobile web app experience to your users is to correctly set the viewport of your app. Place the following code inside the head of your HTML document.

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

Step 2: Set your app name

By default, iOS will retrieve your web app’s name from the title tag. But you can override it by using the meta tag as shown below:

<meta name="apple-mobile-web-app-title" content="onlyWebPro" />

Step 3: Set your app to full screen mode

The next will be, adding a meta tag to maximize the screen space available in your app. This will get rid of the browser’s user interface from your app.

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

Step 4: Set app’s status bar style

Web App Status Bar Style
Other than hiding the browser’s user interface for your app, you can also adjust the style of the status bar. This can be specified using the following code:

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

There are 3 settings you can set for the apple-mobile-web-app-status-bar-style:

default: the status bar appear to be normal & the web content is displayed below the status bar.
black: the status bar has a black background & the web content is displayed below the status bar.
black-translucent: the web content is displayed on the entire screen, partially obscured by the status bar.

Note:
This meta tag has no effect unless you first specify full-screen mode as described in apple-apple-mobile-web-app-capable.

Step 5: Set your app’s launcher icon

You need a launcher icon for your app that displayed on the home screen of the user’s iPhone / iPad. You can specify your app’s launcher icon by using the following code and placed it in the head of HTML document.

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"/>

Step 6: Set your app’s startup image

Next, you have to add a startup image for your app. You can use media queries to target your startup image for the size of the iOS devices & the orientation as well.

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

<link rel="apple-touch-startup-image" href="ipad-landscape-startup.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<link rel="apple-touch-startup-image" href="ipad-portrait-startup.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

On iPhone and iPod touch, the image must be 320 x 480 pixels and in portrait orientation.

On iPad landscape orientation, the image must be 748 x 1024, while in portrait orientation the image must be 768 x 1004.

Note:
You can find out more information on iPad start up image in our previous article – iPad Web App Start-Up Image Configuration

Step 7: Seamless full screen user experience

The last optimization is to offer seamless full screen user experience for your users who access your web app via “Add to Home Screen”. Use window.navigator.standalone to check is your app running in standalone full screen mode, if the condition is true, make all links inside your app remain in the full screen mode when users click it.

<script type="text/javascript">
$(document).ready(function(){
	// iOS web app full screen hacks.
	if(window.navigator.standalone == true) {
		// make all link remain in web app mode.
  		$('a').click(function() {
  			window.location = $(this).attr('href');
            return false;
  		});
	}
});
</script>

Bonus!

You can find out your Apache Server logs to see whether your users accessing your page by “Add to Home Screen” or directly from Safari.

If user is access from the home screen, the user agents will be:

Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_4 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B350

While, if user access directly from Safari, then the users agent will be:

Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_4 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B350 Safari/8536.25

Conclusion

Browsing on mobile devices has been growing dramatically in the past few years. By applying the optimization techniques you’ve learned in this article you can ensure that you’re delivering the best mobile web experience to your mobile users.