Detect iPad Safari or Zoom

If I use the following to detect iPad Safari user, will it work if in future, I try to detect a Motorola Xoom or other tablet user, which might have similar widths.

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

I mean how exactly will I identify the other tablet and use xoom.css or othertablet.css

I know the user-agent approach, but would want to avoid that. Please let me know if 开发者_StackOverflow中文版it is possible to implement using media queries only?

No, you can't tell what specific device is being used based on media queries (and you shouldn't need to as they are all converging on the same standards)

We are starting to develop using Formfactor detection libraries such as FormfactorJS - note, I created this.

The theory being using the same semantic HTML, you can specialize your CSS and Javascript using for a given class of device (smartphone, tablet, desktop etc) whilst also being cognizant of responsive design to individual device profile using Media Queries.

The good thing at least, is that you can specify your own detection algorithms, so you can detect different types of the same class of device (i.e, iPad or Xoom). We chose to do this through userAgent checking in this case. Why? because depending on the formfactor or device type you might want to offer optimised experiences.