CSS Media Queries for Mobile Devices

Writing CSS for different devices can be a pain in the ass. With Media Queries it’s easier, if you know how to pin point a specific device.

This can help you pin point a specific mobile device from within your CSS. Copy the code and paste it into you CSS file and get crackin’!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* The New iPad (iPad 3) ----------- */
@media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Thoughts and comments

  1. Mattias Isegran Bergander says:
    June 15, 2012 at 2:57 pm

    For testing media queries, this is quite nice:
    http://codeinchaos.github.com/mobile-screens/

    Reply
    1. Andreas Norman says:
      June 15, 2012 at 3:43 pm

      or this one www.responsinator.com

      Reply
  2. Mattias Isegran Bergander says:
    June 15, 2012 at 3:19 pm

    Also note that that is mobile only (as you state). Desktops such as a 24″ 1920*1200 for example ending up at the second one, “Smartphones (landscape)”.
    Worth mentioning is that android devices such as Galaxy Nexus from last year, and probably the newer ones, such as HTC One, Xperia Acro, Xperia S,Galaxy S3 and others, in this configuration end up (they have a pixel ratio of 2 and resolution of 1280*720 or (vice versa depending on landscape/portrait of course) end up at the last one, “iPhone 4″.

    Reply
    1. Andreas Norman says:
      June 15, 2012 at 3:45 pm

      Desktop resolutions will not be adressed since I use device-width. For desktop use min-width and max-width instead of min-device-width and max-device-width.

      I might need to add more media-queries for android based devices. 

      Reply
      1. Tim says:
        April 26, 2013 at 7:08 pm

        On the desktop device-width will give you the monitor size, which is useful if you want to target a “normal” desktop website that will *not* adjust with the browser window size. One of the most frequent misunderstandings is to think that device-width and device-height change with orientation. This is often not made clear enough. They don’t, even on iOS devices; they provide the absolute virtual viewport dimensions, irrespective of device orientation. So device-width is always the smaller value.

        Reply
        1. Tim says:
          April 29, 2013 at 6:24 pm

          I spoke too soon. Turns out that quite a few mobile browsers also change their device-width response depending on the orientation of the device. Also, different browsers use different values for device-width for the same device, so you can’t really depend on it. Combined with the increasing number of hi-res phones and tablets that are difficult to distinguish from desktop devices — even though they need different layout because of screen size — the situation is becoming more and more unclear.

          It would have been great if someone had thought of a media query parameter like device-screen-diagonal that would provide the screen dimensions in mm. That would solve a LOT of problems. Sigh…

          Reply
  3. jitendra says:
    September 22, 2012 at 5:27 pm

    what is media quiery for Android Phone (Samsung Gallaxy note)?

    Reply
    1. Andreas Norman says:
      November 19, 2012 at 1:31 pm

      sorry, cannot help you there. I have no android devices in my drawer to test that :/

      Reply
  4. Sven says:
    October 15, 2012 at 7:32 pm

    /* The New iPad (iPad 3) ———– */
    @media only screen
    and (min-device-width: 1536px)
    and (max-device-width: 2048px)
    and (-webkit-min-device-pixel-ratio: 2) {
    /* Styles */
    }
    Thats not true, iPad3 has the same device-width like iPad2 only doubled pixel-ratio.

    Reply
  5. pieroxy says:
    October 17, 2012 at 11:09 pm

    I have set up a little page allowing people to view the values of their media features, pretty useful to figure out what to use on which device. Hope that helps.

    http://pieroxy.net/blog/pages/css-media-queries/test-features.html

    Reply
    1. Andreas Norman says:
      November 19, 2012 at 1:31 pm

      That’s nice!

      Reply
  6. lakesidetechies says:
    December 27, 2012 at 9:53 am

    Impressive, thanks for the effort. This makes our easy to just copy and paste your responsive CSS media queries.

    Reply
  7. Useful Website Development Resources | Code Chewing says:
    May 21, 2013 at 5:39 pm

    [...] Example CSS media queries http://www.andreasnorman.com/css-media-queries-for-mobile-devices/ [...]

    Reply

Share your thoughts

Your email address will not be published.