css media queries: target mobile devices without specifying width, pixel ratio, etc

Question

Let's say I just want to target every tablet and phone, regardless of size, is there a media query for this? Is it possible to do this without specifying a size? Or is using a size the only way to target mobile devices, and not desktops?

Answer 1

In the CSS3 spec, @media handeld is mentioned but it has perhaps no browser support.

So, no.

However, you might find this site useful, it explains other some media query techniques for mobile.

Answer 2

I've been struggling with this for a few days, but a good way to check for handheld devices is the max-device-width. Desktop pc's don't send this to the browser, but most (if not all) handhelds do use this.

In my case I wanted to show a compressed version of the site on all devices (including desktop) when below a certain width, for which I used

@media all and (max-width: 640px)

But a certain overlay popup that used position: fixed had to be changed on handhelds only (because the css property works in all desktop browsers but not on all handhelds). So for that I used an additional rule:

@media all and (max-device-width: 640px)

In which I target all handhelds below 640 but not desktop browsers. Incidentally, this also doesn't target iPads (which is how I wanted it) because it has a higher device width than 640px.

If you just want to target all devices just pick a low min width (1px) so that it doesn't exclude any device regardless of width.

Answer 3

I don't think you'll have too much luck with a pure css approach. You'll want to do something along the lines of the modernizer.js approach and us JS to detect device and append a class name to body based on that.

What is the best way to detect a mobile device in jQuery?

Then include that class in your media queries to special case mobile devices of varying sizes.