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

Question

Say I just want to target each tablet and phone, regardless of size, is there a media query for this? Can this be done without specifying the size? Or uses size only to target mobile devices, not desktops?

Answer 1

The CSS3 specification mentions @media handeld , but it may not have browser support.

So no.

However, you may find this site useful; it explains other multimedia query methods for mobile devices.

Answer 2

I struggled with this for several days, but a good way to test handheld devices is to maximize the width of the device. Desktop PCs do not send this to the browser, but most (if not all) handheld computers do use it.

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

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

But a specific popup using position: fixed should only be changed on handheld computers (since the css property works on all desktop browsers, but not on all handheld computers). Therefore, for this I used an additional rule:

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

In which I am aimed at all handheld computers below 640, but not at desktop browsers. By the way, this is also not aimed at the iPad (which is exactly what I wanted), because it has a higher device width than 640px.

If you just want to target all devices, just select the minimum width (1px) so that it doesn't exclude any device, regardless of width.

Answer 3

I don't think you will have too much luck with a clean css approach. You will want to do something in accordance with the approach of modernizer.js and us JS to detect the device and add the class name to the body based on this.

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

Then include this class in your media queries in special mobile devices of different sizes.