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’!

/* 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. Hi,
      I m designing web site for mobiles.But i m not getting how to add reference to original web site(which is already exist for larger screen)when the screen size is larger than 750px.
      Plz help me its very urgent for me

    2. There’s nothing “nice” about these alleged responsive testing sites; they NEVER match how you see it on the actual device.

  1. 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”.

    1. 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.ย 

      1. 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.

        1. 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…

  2. /* 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.

      1. Well, I got the width and height by successively trying different media queries (like, hundreds of them) and seeing the largest one that gets triggered by the browser. I don’t think it is a good idea to reuse this for anything else than a detection system… What did you have in mind?

    1. and I found much of it on a forum somewhere. It’s not like I invented something. This is just a snippet ๐Ÿ™‚

  3. Nice tutorial.
    Is it only iphone and ipad? I have used in android 10 inches tabs. I have used
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) {
    //here is my style

    }
    But problem is that on first time it is working fine. When i move to landscape it also works. But again i move to portrait my tab then it does not work. Always landscape works. But from second time portrait does not works all.
    Please help me…

Share your thoughts on this

Your email address will not be published.