Safari om the iPhone is an incredible powerful browser and comes with a whole bunch of features.
Besides the amazing support for CSS3, a superfast rendering engine and great JavaScript support, there are a few hidden gems I want to explain in this (and maybe following) blogposts. If you are interested in mobile web development, maybe you will find a few features you haven’t seen before.
Making your web app iPhone ready
Note: you can visit the example used in this blog post from your iPhone here.
The most well-known and really most important meta tag you need to know about is the viewport meta-tag. It allows you to define the minimum and maximum zoom-level and whether or not the user is allowed to zoom into the view. You disable zooming by setting the minimum-scale to the same value as maximum-scale. At the same time you can define the viewport width and height by setting the “device-width” or “device-height” properties. If you have a website with a width of 960px and you want it to be zoomed in to fit exactly that width, all you need to do is to set width to 960. Since your website should run on several devices though with different resolutions it is not recommended to set an absolute width and instead use the predefined device-width and device-height values. This ensures that your viewport has exactly the size supported by the device.
Now lets get to the juicy part. When creating an HTML5 app for the iPhone you can define an icon which you will see on the start screen of your iPhone. Once you set this meta tag, the user won’t be able to see a difference between a native application and a web application on your iPhones homescreen.
To add even another level of detail you can define a startup screen for your application. This is especially useful when your application supports offline mode using cache manifests.
All of those features wouldn’t be complete if you couldn’t hide the browsers chrome once you start your application from the homescreen. To disable the chrome just insert following tag:
Now after you have added this meta tag you want to be able to differenciate between the user launching the app from the homescreen of the browser.
if ("standalone" in navigator){
if (navigator.standalone){
alert("Started from homescreen");
}else{
alert("Started in browser");
}
}else{
alert("Not supporting standalone property");
}
Last but not least you can even control the look and feel of the status bar on the top. You can either use the default status bar or a black status bar or a semi translucent status bar:
These are the most important things you need to know to make a simple website be HTML5 app ready on your iPhone (note: this only works on the iPhone but won’t hurt other devices and platforms). A “normal” user won’t be able to differentiate between a native or a HTML5 app anymore. Do you know of similar features of other phones? Do you think we should standardize the discussed features? (Some are already).
If you need support getting your website or web application HTML5 app ready, feel free to contact us.
Enjoy
