Forgotten tricks for iPhones Safari 13


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.

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>

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.

<link rel="apple-touch-icon" href="/yourIcon.png"/>

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.

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

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:

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

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.

// navigator.standalone
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:

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

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

Dowload

  • Richard

    Is there a way to completely hide the status bar?

  • Nikolai Onken

    Hi Richard,

    no there unfortunately is no way to hide the status bar completely (unless you use something like PhoneGap and develop a native app with a WebView).

    Regards,

    Nikolai

  • http://phpwebmaster.info church webmaster center

    Good article on this subject. Can’t wait to read your next blog.

  • http://www.fatburncleanse.com Isagenix

    Very nice! I did not realize I could make my websites work on the iPhone with so little work such as using a meta tag.

  • http://www.iphonereviewblog.net Fernando Timberlake

    Awesome Post, thanks for the fine Post. I will come back soon . Also great information about the iphone : iphone reviews

  • http://forums.avault.com/member.php?906-jwright [email protected]
  • http://honorar.si Zaposlitev

    arxomtajeqkujmefunsv, delo, cuHMUCs.

  • http://www.twitter.com/GeeksMobile_USA Geeks Mobile USA

    This is a great resource, I think it would benefit any company that uses this for its employees, as well as individuals. I don’t agree with some of the points however.

  • http://blog.udn.com/taiwaneseo Nathanial Kolk

    have been visiting your blog for three days. absolutely love your posts. btw i’m doing research concerning this topic. do you know other great websites or perhaps online forums in which I can get more? thanks a ton.

  • http://www.iphonecentral.us/tag/sprint Olevia Smillie

    I love my iPhone 4 so much that my iPad is getting jealous :D

  • http://devvicky.com/ free microsoft word

    very informative post. Looking more to something like this

  • http://crazyflx.com SMF forum posting software

    This is often a very great read for me, Need to admit you might be a single with the finest bloggers I ever saw.Thanks for posting this informative article.

  • http://consultingjoe.com Joe

    How do you keep links from opening in a safari window when in this webApp mode? Is there a easy jQuery trick to keep pages from exiting the webApp?

    Thanks