Ministry of Technology
Show Menu

Detecting Touch Devices

The front page of the Ministry of Technology website proved to be a tricky navigation prospect for touch devices. The animation elements of CSS3 allowed me to create a really nice, flash free, animated logo for navigation around the site. Although the logo worked on all of my target platforms the usability on touch devices was just not acceptable, as the hover event doesn't actually take effect until I'd actually selected the element on screen.

After some searching around the internet, I found the JavaScript 'ontouchstart' event. I could then query the event as follows to determine if the device is touch enabled or not...

function isTouchDevice() { 
    return "ontouchstart" in window;
}

Not ideal, but it would do until there's a better way of doing it that doesn't involve analysing loads of different user agents. I've got this working on the iPhone 4 and iPad. I don't have other devices to try so if you try this, please let me know how it works with your devices and I'll update the article accordingly.

I then mapped this in to a jQuery function to set visibility on the elements to show either the standard or touch version of the links on the home page (The touch version shows the rings as seperate decoupled elements) by attaching 'nonTouch' and 'touchOnly' classes to any elements that should be shown or hidden...

$(document).ready(function () {
    if (isTouchDevice()) {
        $('.nonTouch').height(0);
        $('.nonTouch').hide();
        $('.touchOnly').show();
    } else {
        $('.nonTouch').show();
        $('.touchOnly').hide();
    }
});

I'll continue to write more on my mobile experiences as I do more work to make the site a better fit for mobile usage.