Best way to detect touchscreens (ipad, iphone, etc)?

Question

I need to load some additional CSS to my page if its being viewed on a touch screen device like an ipad or iphone. Whats the easiest way to do this? Thanks

Answer 1

For iPad you can try:

 if (window.Touch)
  {
    alert("touch my ipad/iphone/ipod");
  }
  else
  {
    alert("no touch!");
  }

I'd venture to guess that iPhone works the same way.

You can also use CSS media queries to produce something like this:

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> 
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css"> 
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">