Detect iPad Safari or Zoom

Question

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 it is possible to implement using media queries only?

Answer 1

不，您无法根据媒体查询来判断使用的是哪种特定设备（您不需要因为它们都在相同的标准上融合）

Answer 2

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 (ie, 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.