Sunday, May 27, 2012

Some simple but effective JavaScript and CSS tips to make your iPad web app feel native

When I am developing HTML5 games, one of the devices that I like them to be run on is the iPad. I have become a fan of this touchscreen device because children (including my daughter) can learn to use it very quickly. I usually do not try to make my apps look like native iPad or iPhone apps (where others go to great lengths). However, I do like my apps to feel native, which starts with being able to run them full screen. The Mobile Safari browser on the iPad allows users to add a web app or page to their home screen. If I, the developer, add the following meta tag to the HEAD section of my HTML, the app will be run full screen when it is launched from the home screen:
<meta name="apple-mobile-web-app-capable" content="yes" />
Next you may have noticed that Mobile Safari has the interesting ability to make web pages have a feeling of elasticity to them. This 'elastic scrolling' occurs when you drag web content past the bottom or top of the page. The page gets elastically moved away from the URL bar or the button bar, or the top or bottom of the screen if it's in full screen mode. In something that is designed more as a web 'app' than as web 'content', the elasticity can become annoying. Therefore I disable it in my apps by adding the following JavaScript:
document.addEventListener('touchmove',
    function (e) {
        e.preventDefault();
    }, false);

To conclude this post, I will describe two WebKit-specific CSS properties that also make your iPad web app feel less like a web site:
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

When a link is tapped in Mobile Safari, a grey background appears over the link by default. This is pretty ugly, so I add the -webkit-tap-highlight-color property to my CSS to disable it.

The -webkit-touch-callout: none; disables the 'callout popup' that appears when a user taps and holds a hyperlink for a few seconds.

Be sure to check out this blog regularly if you are interested in more tips to make your iPad web app feel more 'native'.

2 comments:

  1. Hi.

    where in my CSS should I put this:

    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;

    -Thanks

    ReplyDelete
    Replies
    1. Hi,

      You can put the following at the beginning of your CSS file:
      * {
      -webkit-touch-callout: none;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      }

      Jeroen

      Delete