Style sheet for touch devices

It’s easy to include a style sheet for small-screen mobile devices, but what if you specifically want to target touch devices. Then you also need to include devices with larger screens. The iPad has a resolution of 1024x768, but many desktop users also have this resolution, so you can’t just increase the max-device-width in your CSS media query. I’ve tried to find a better solution to the problem, but none seems to exist yet.

So the best solution I’ve found is to use JavaScript to detect if the browser has touch events. It’s a bit dangerous because Firefox and Chrome have support for touch, so you can’t be sure they don’t expose the touch events to devices without a touch screen. Fortunately this has already happened in Google Chrome. The team decided to disable the touch events so the detection developers already used would continue to work.

Paul Irish has researched a bit for Modernizr to find out what detection methods work best. You can of course use Modernizr, but if all you need is this test it’s not necessary to include the whole library. All you really need is this:

'ontouchstart' in window

At first I did the test in the initialization code on document.ready, but then the style sheet will load too late. I definitely don’t like document.write in external scripts because then you can’t load them asynchronously in an easy manner. However, now it’s actually useful, since we want the style sheet to be written out and loaded before the page is visible.

<script type="text/javascript">
    if("ontouchstart" in window) {
        document.write('<link rel="stylesheet" type="text/css" media="only screen" href="/css/touch.css">');
    }
</script>

Anyone have a better way?