css media queries: target mobile devices without specifying width, pixel ratio, etc
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?
In the CSS3 spec, @media handeld is mentioned but it has perhaps no browser support.
However, you might find this site useful, it explains other some media query techniques for mobile.
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.