This article is about to provide quick tips on how to run your responsive web application in to the IOS ( Iphone OR IPAD) as full screen playback mode ( very similar to native app)
Note : it will only work after the user has added the web site to the home screen and when the user launches the site independently of Mobile Safari.
1 Meta Tag for “App” Mode
If you want to provide a feature to the users so they can add the your application into home screen and launch it from home screen something similar to native application. then all you need to do is to add following meta tag into head section of the webpage It will display your bookmarked webapp in a full-screen mode.
<meta content=”yes” name=”apple-mobile-web-app-capable” />
You can also detect that if user is in this which mode by checking the “window.navigator.standalone” property. It will return true if the webapp is in full-screen and false otherwise. This is really usefull if you want to display different informations whether you are in a full-screen mode or not.
2 Application Icons on Home Screen
If you want your webapp to have it’s own customized icon when it’s bookmarked on the homepage, then following link into your web page.
<link href=”icon.png” rel=”apple-touch-icon” />
The image must be a “png” file. The iPhone will automatically add a “glossy” effect to your image.
On older iPhones, which used 56×56 icons, and the iPad, which uses 72×72 icons, the graphic automatically scales down.
If you use “apple-touch-icon-precomposed”, you should have a link like this in the “head” section of your webapp:
When user add the your web application to home screen the customized icon will be download and set to the home screen if you don’t specify the custom icon then it will take default icon.
3 Startup Screen / Splash Screen
It’s good have a the startup splashscreen when your application launch in native mode, You can set the startup by adding following link tag
<link href=”splash.png” rel=”apple-touch-startup-image” />
Once again, the image must be a “png” file. This time, it MUST also be exactly 320px wide by 460px high, otherwise the image won’t appear.
4 How to instruct the user to use this feature if they want to:
If you have implemented this feature into your web pages it’s good to instruct the user to about this feature when it comes to your site see following screen for more detail there is open source script available for adding this feature :
You can review the documentation is at here :
http://cubiq.org/add-to-home-screen
