6

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?

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
android.nick
  • 11,069
  • 23
  • 77
  • 112

3 Answers3

7

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.

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
  • 2
    max-device-width is reported by Chrome before anyone goes down this path. – eighteyes Jan 14 '13 at 22:57
  • I had to break my media queries only ambition and use JS to target smaller browser windows. – eighteyes Jan 22 '13 at 18:10
  • 1
    How do you deal with all the good phones that have width >= 720px ? I mean outside of the apple world, 720p has been the norm for ages, and I don't see how just max-device-width is an acceptable solution. – Morg. Oct 03 '13 at 05:59
  • In this specific case I needed only devices smaller than 640px. If you read the entire answer, I also state that using a `min-device-width` of `1` will capture all devices (and still not deskops). It's the `device` part that captures the device, not the width – Stephan Muller Oct 03 '13 at 06:44
  • you didnt update your answer... it doesnt only target handheld – nights Dec 08 '15 at 10:37
  • Oops. I have the feeling the answer is kinda outdated nowadays anyway. I'll see if I can find some updated information, it's been ages since I worked on the project I needed this for – Stephan Muller Dec 08 '15 at 10:52
5

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.

bookcasey
  • 39,223
  • 13
  • 77
  • 94
0

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.

Community
  • 1
  • 1
Keith Brings
  • 241
  • 3
  • 5