title: CSS media query to detect device type regardless of size
body: <p>I have been looking into media queries, but so far all the examples I can find on google and Stack Overflow have been to use specific sizes (<code>max-width</code>, <code>max-device-width</code>, etc.) The problem with this is that it doesn't give me the flexibility I need. I want to be able to deliver a ** specifically tailored** experience to desktops and tablets.</p>
  
  <p>The reason I want to do this is that interacting with a tablet is different than interacting with a small computer monitor. An iPad in landscape orientation is 1024x768, which also happens to be a common computer monitor size. The difference however is that on a computer, pointing to small controls with a mouse is easy, but it is very difficult to tap the same size controls on an iPad, especially for someone with large or clumsy fingers.</p>
  
  <p>How can I deliver a tailored experience to an iPad user vs a desktop user with a monitor of the same size? I'd like the desktop experience to not be forced to use jumbo sized buttons that a touch experience requires.</p>
  
  <p>Is this possible with media queries, or something else? I see that there's a "handheld" option for media queries, but I've read that most small device browsers ignore this.</p>