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.
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:
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.
Anyone have a better way?Tags: CSS interface development ipad modernizr