Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Media Queries for Standard Devices

If you think responsive's simple, I feel bad for you son. We got 99 viewports, but the iPhone's just one.
—Josh Brewer, March 10, 2010

A major component of responsive design is creating the right experience for the right device. With a gazillion different devices on the market, this can be a tall task. We've rounded up media queries that can be used to target designs for many standard and popular devices that is certainly worth a read.

If you're looking for a comprehensive list of media queries, this repository is a good resource.

If you're reaction to this is: you should never base your breakpoints on devices!! You have a good point. Justin Avery has a nice post on the possible pitfalls of using device-specific breakpoints. Choosing breakpoints based on your design and not specific devices is a smart way to go. But sometimes you just need a little help getting one particular situation under control.

Phones and Handhelds

iPhones

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

Galaxy Phones

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

HTC Phones

/* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

Nexus Phones

/* ----------- Nexus 4 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 384px) 
  and (device-height: 592px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 384px) 
  and (device-height: 592px) 
  and (-webkit-device-pixel-ratio: 2)
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 384px) 
  and (device-height: 592px) 
  and (-webkit-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- Nexus 5 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 592px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 592px) 
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 592px) 
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: landscape) {

}

Tablets

iPads

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

Galaxy Tablets

/* ----------- Galaxy Tab 10.1 ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {

}

/* Portrait */
@media 
  (max-device-width: 800px) 
  and (orientation: portrait) { 

}

/* Landscape */
@media 
  (max-device-width: 1280px) 
  and (orientation: landscape) { 

}

Nexus Tablets

/* ----------- Asus Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

}

/* Portrait */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) 
  and (orientation: landscape) {

}

Kindle Fire

/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 800px) 
  and (max-device-width: 1280px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) 
  and (orientation: landscape) {

}

Laptops

Media Queries for laptops are a bit of a juggernaut. Instead of targeting specific devices, try specifying a general screen size range, then distinguishing between retina and non-retina screens.

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

Wearables

Yes, we're going there. Sure, these might not exactly qualify as "standard" devices quite yet, but they are fun to look at.

Apple Watch

/* ----------- Apple Watch ----------- */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 

}

Moto 360 Watch

/* ----------- Moto 360 Watch ----------- */
@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 

}

Comments

  1. alpaproductions
    Permalink to comment#

    Pretty useful! I’ll have to try it though.

  2. carlos
    Permalink to comment#

    What are you using to switch between mobile width and full width on your current site?

    I don’t quite see it in your source.

    • Cody
      Permalink to comment#

      He isn’t using a different width just for mobile. He is using things such as

      @media (min-width:500px){/*Class name*/{/*properties*/}}
      @media (max-width:499px){/*Class name*/{/*properties*/}}
      

      This just says that any time there is a screen size bigger than 500px, certain styles will be applied, and when it is below that, it will apply different properties.

    • test

      I don’t quite see it in your source.
      Reply ↓

  3. Tj
    Permalink to comment#

    Just read your post on using CSS for alternate styles for websites based on screen resolution. Great post.

    I’m wondering if I can pay you to make me a simple template for HTML emails (that look like text) that looks good in mobile devices and desktop.  Here’s the specs…

    If the screen size is not mobile device then I need the text area to wrap at 350px.

    If the screen size is mobile device then I want the text to wrap 100% across the screen (for either landscape or non-landscape) with a max width of 350px (in case of something like landscape mode iPad).

    I need the text itself to be style font size +1 (so it looks slightly larger then the users normal email messages).

    What I’m looking to avoid is using a 350px table to wrap the text and then having the iPhone shrink the text down smaller then normal… Requiring the user to take an extra step zooming in.

    Also looking to avoid using end of line breaks at 350px and having those breaks end up mid screen on a mobile device (looking horrible).

    Should be pretty simple for someone into this stuff.  Let me know if you can do it and how much.

    • Burke
      Permalink to comment#

      Just FYI, this is impossible if you plan to support all email clients. Gmail strips out the head of your message so media queries wont work. The best you can do is build a fluid layout and use text-size-adjust.

    • Dom
      Permalink to comment#

      Go to http://htmlemailboilerplate.com/

      It’s exactly what you are looking for.

  4. Mark
    Permalink to comment#

    I’m just at the base of my learning curve on using alternate stylesheets for different devices. Following your example elsewhere I’ve sort of got it working. I’m testing it on my HTC Desire Android and for it to work on this phone I’m having to set as follows:

    screen and (min-device-width: 1008px) – HTC Desire ignores
    screen and (min-device-width: 1009px) – HTC Desire uses this stylesheet

    The Desire is 480×800 so there’s a part of this I’m not understanding!

    • Chris
      Permalink to comment#

      have you used device width, initial scale=1 in your meta? mobile devices sometimes rescale their viewings…

  5. David Nemes
    Permalink to comment#

    Here can you find more Media Query Snippets. http://nmsdvid.com/snippets/

  6. Ronny
    Permalink to comment#

    Nexus S reports 533 Pixels in landscape mode. so none of the above snippets will work if the phone is in landscape mode when you navigate to your site. my iPod on the other hand always reports 320px in portrait, as well as in landscape mode. Same for iPhone 4. It always reports 320px.

  7. Omer Levi
    Permalink to comment#

    Is this set of media queries suitable for the “mobile-and-up” approach?

  8. Jim
    Permalink to comment#

    In my testing, the “min-width: 321px” seems to override most of the others. Is that necessary/helpful? I notice that you (Chris) don’t use it in your code for this site. Looks like you’re only using:

    @media (max-width: 1350px) {}
    @media (max-width: 1200px) {}
    @media (max-width: 1024px) {}
    @media (max-width: 860px) {}
    

    Thanks!

    • Arush Sehgal
      Permalink to comment#

      You are correct, but I’m not sure what the solution is here. Chris?

    • Cody
      Permalink to comment#

      If you use min-width:321px, then max-width:500px, the min width property overrides it because it applies all styles above 321px.

  9. shah
    Permalink to comment#

    Nice Article .thank u

    Hey Guys !!!!!
    I Have a Problem

    In regards to the media queries working on android browser. I Use Dreamweaver CS5.5. When I tested there was no change .
    When I tested in landscape view it takes the default web browser screen width it is not device screen width.

    • Ryan Lowe
      Permalink to comment#

      Same problem. Android browser adopts default stylesheet instead of mobile stylesheet. Testing on Nexus S.

    • Ryan Lowe
      Permalink to comment#

      I think I’ve figured it out. When I use “(max-device-width: 800px)” it works. I guess @media is seeing that my Nexus is 480×800 and taking the higher number as the width.

  10. Mike
    Permalink to comment#

    When I use this to request a stylesheet for retina displays:
    <link rel=’stylesheet’ type=’text/css’ href=’/css/mobile-retina.css’ media=’only screen and (-webkit-min-device-pixel-ratio: 2)’/>

    I can’t get the W3 Validator to validate this. The error is: Bad value only screen and (-webkit-min-device-pixel-ratio: 2) for attribute media on element link: Expected a letter at start of a media feature part but saw – instead.

    Is there a way of using the value “-webkit-min-device-pixel-ratio” mentioned in this post in a way so that it’s ‘valid’?

    • german
      Permalink to comment#

      Mike:
      I would add Your mobile-retina.css in Your main CSS file?
      Example:

      /* Start main CSS file */
      . . .
      @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      /* here come styles from mobile-retina.css */
      }
      /* End main CSS file */
      
    • Marcy
      Permalink to comment#

      Nobody really validates HTML anymore since there are so many evolving standards. If your site works then why do you care?

    • Eric Sebasta

      No. any css “extension” that is rendering engine specific does not validate. Anything starting in -moz for Mozilla or -webkit for example… while it works … is not technically valid.

    • Laura

      I this thread outdated please? I there more up to date guide for standard media queries??

      I am sort of a newbie to media queries, so please excuse me if I seem out of touch with the latest media queries code. However, I am just reading these comments for the first time and they are over 3 years old. Does this site have an updated thread please??

  11. BirdYosh
    Permalink to comment#

    (orientation : portrait) doesn’t validate for CSS3…. Are you ignoring that? Or do you have a workaround?

    Thank you….

  12. Robbiegod
    Permalink to comment#

    i am writing right now is a page that will change the background image for each screen device because the desktop version is going to have hi-res photos on it. So, I don’t want to make mobile people download these super large images. I want my CSS files to be seperate so i am writing my media queries like this for example:

    So a quick question. IF i visit a page that uses media queries does the browser download all of the style sheets or just the one that has been targeted? In my case, the styles.css should always load and then the other media queried stylesheets will load depending if they are true or not.

    • Nicholas
      Permalink to comment#

      Your questions does not have a 100% definite answer, however I was researching this last week and came to one straight forward way of explaining this. If you are using display:none, you have a better chance of that element not being rendered by the browser. While if you are using visibility:hidden, the element you are configuring will be preloaded by your browser. Basically, it all depends on how the change takes place in your stylesheet to make the object hidden or shown – and of course which browser/platform/device the user is accessing from.

    • Paul

      If you place all css in one file (including media queries), the device will download all assets regardless of the devices dimensions, so while you might use display:none to completely remove the element from the architecture of the website, it’s assets are still downloaded.

      You are best to use a global style sheet, then target each break point setting with it’s own css file, this way ONLY that file and it’s assets will be targeted.

      If you load desktop images in your global style sheet, then target smaller devices with smaller images, overriding the larger, you will be loading both the large and smaller image – even though the larger is not being displayed, it is being loaded, thereby slowing down the load time of the site for mobile users.

      Always best to use separate media query files to target the devices within the break point range … and always use min and max settings to target these devices, because if you use only min size and overwrite by the next larger size (or smaller size) you are still loading all assets.

  13. Jeremy Mansfield
    Permalink to comment#

    Is it possible to target the iphone4+ with a separate media query than other smart phones with the same min/width size

    I ask because my responsive site (http://www.cortac.com) is shaping up nicely on an iPhone4+. However, in older (2 year old) Android’s, etc., the footer doesn’t *stick*, and I was hoping to simply have the footer display: none;

    However, by doing so, that also kills my iphone4+ styling where I *do* want the footer to display. The problem is that the iphone4+ and the normal *smartphone* min/max dimensions are targeting the same dimensions of 320 and 480 respectively and I am unable to get separate devices with same width/height ratios to be targeted differently without overriding each other. Any online articles that talk about this would be greatly appreciated!

    • Marcy
      Permalink to comment#

      Did you try checking for the existence of a retina display (-webkit-min-device-pixel-ratio)?

    • Frank Patricci
      Permalink to comment#

      LOL!

      “Jeremy Mansfield: Jesus Lover…”

    • Kristin Schaeffer
      Permalink to comment#

      Gorgeous site, Jeremy! And I really like how you’ve broken it up with media queries. I stumbled on this post searching for the same problem you had – getting everything to look the same cross-phone-browsers. I think this thread may help me. Thanks for posting and keep up the awesome work.

    • Paul

      You can not target specific devices with CSS … that’s where adaptive design comes into play by mixing together both javascript (or jquery) and css to target specific devices, set break points, and anything else css can not do, then apply the styles associated by the Adaptive targeting.

  14. Robbiegod
    Permalink to comment#

    Does the trick that “german” wrote to “Mike” let you target the iPhone4? iPhone4 and iPhone4S are the one with the retina display?

    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
    /* here come styles from mobile-retina.css */
    }

    That should work right? Just put that in your main css file where you hide the footer but then add a style in there to display it…

    Also, i checked out the website too, looks great. One question I have is when i collapse the browser i notice that you always use the same set of images. Are you planning to keep it that way or will you optimize it for mobile devices by making the background not as big.

    I’ve made my site so that it loads a different background image depending on what kind of device it is. I don’t want to download a 150kb-200kb background on my phone when i don’t have too.

  15. Jeremy Mansfield
    Permalink to comment#

    Robbie, thank you for your response. I do have the styles for the retina display only, in addition to regular smartphones, and it does not seem to work on distinguishing between the two. If I eliminate the footer for normal smartphones, it overrides the retina styles regardless. Seems to be all or nothing so far.

    Yes, thank you for your observation. I indeed plan on loading in smaller background images for the mobile version. I just have not added in those media queries yet, as this is a responsive experiment for me in progress.

    • Paul

      use this to target specific devices
      (function(a){(jQuery.browser=jQuery.browser||{}).mobile=/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

      Then call navigator.vendor to determine the device

      you should see something like this in the response:
      Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16

  16. chris
    Permalink to comment#

    My issue is the same as Marks. I am currently using Bootstrap and it seems like the layout changes should be made when the page is vertical in the ipad, but the layout doesn’t change unless I alter the media queries from 768px to 769px. I’m sure this isn’t the way it’s supposed to be done…

    This is in the my header.php

    &ltmeta name=”viewport” content=”width=device-width, initial-scale=1.0″&gt

  17. ChrisHu
    Permalink to comment#

    There are several reasons to use the viewport-width instead of the device-width.
    Read more under:
    http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

    • Steven
      Permalink to comment#

      You sir are a genius. Works like a charm! iphone4+ now show a different css and I can now make my desktop browser 800px minimum width and not the minimum 1136px (iphone4+)

  18. Run Raksmey
    Permalink to comment#

    Hi now i want to put |Home| page in my web. can you express to me.

  19. Rats
    Permalink to comment#

    @Run Raksmey

    Sure via fed express, $1.78 per pixel.

  20. Ram Ratan Maurya
    Permalink to comment#

    Hello,

    I used about media queries in a recent project, when I enter into landscape mode from portrait mode on iPad it appears scaled i.e. its already zoomed. I want it to show on original page zoom on both portrait and landscape mode.

    Any solution for the same?

    • Peter Wooster
      Permalink to comment#

      Yes there are solutions for this. The simplest is to use Chrome instead of Safari as this is a mobile Safari bug. You can also look at my post on Forrst for various workarounds http://forrst.com/posts/Fixes_for_Mobile_Safari_Zoom_Orientation_bug-2S0, I currently use the accelerometer based fix.

    • Ashley
      Permalink to comment#

      You can overcome this with some Javascript.

      Add this to your <head> element.

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      Then:

      <script type="text/javascript">
          if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
              var viewportmeta = document.querySelector('meta[name="viewport"]');
              if (viewportmeta) {
                  viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
                  document.body.addEventListener('gesturestart', function () {
                      viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
                  }, false);
              }
          }
      </script>
      
  21. Jonathan
    Permalink to comment#

    Hi!

    Am I really the only one with issues using media queries and Desktop Safari?!

    @media only screen and (min-device-width : 321px)

    targets safari browser on desktop aswell, regardless of size of browserwindow.

    • Tony Shaw
      Permalink to comment#

      You are not the only one with safari issues. I am having the same issues with safari picking up @media css as well in ANY resolution. the problem is i did a @media body {overflow:hidden} and safari will not scroll now lol

    • Paul

      you need to add a max-width break point as well … the style you set in min-width starts at the size and goes up and is inherited.

    • Eric Sebasta
      Permalink to comment#

      that makes complete sense!

      You said match every screen device with over 320 pixels. That is every device except very old phones, and you asked it to look and device-width, not width, so it does not care about the size of your browser window at all… only the devices width.

  22. Robbiegod
    Permalink to comment#

    just a stab in the dark to help you out, but you are saying the minimum width needs to be 321px, which your safari is at least 321px wide, so of course its going trigger on there.

    Try using max-width instead.

    Look at the code example above, you see for smartphones he uses (max-width:320px;).

    • Jonathan
      Permalink to comment#

      Yeah I know, but I’m refering to this in the examples:

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

      Changing it to min-device-width doesn’t help either.

    • Ri
      Permalink to comment#

      Instead of using @media only screen and (min-device-width: 321px) {}

      Use @media only screen and (max-device-width: 480px) {}

      Works like a charm!!! ☺

  23. KevinM1
    Permalink to comment#

    What would be the heights associated with the widths? I’m weary about above-the-fold problems.

  24. robbiegod
    Permalink to comment#

    You would have to research each device you want to target to find out the heights or find the phone with the lowest resolution to use as a baseline.

    Honestly, you should just structure your page so all important vital things are at the top and less vital things below that.

    Amd make it so your 2ndary things are partly visible so they know tp scroll, but I think it is mostly implied.

    Look at other mobile sites and measure.

    • Marcy
      Permalink to comment#

      The page fold is a myth…people know how to scroll. Especially on mobile web.

  25. Vic Dinovici
    Permalink to comment#

    Hello everyone,

    I’m pretty new to this media queries thing so I may be missing something but I try to implement lessframework on a page and something weird is happening on my iPhone4:

    – when is in portrait it is resizing the page just fine but when I rotate to landscape the page goes out of boundaries
    – if I refresh the page while in landscape the page is looking just fine

    I also noticed exactly the same thing on their website http://www.lessframework.com.

    Does anyone know how to fix this?

    Thanks,
    Vic

  26. Jared Booye
    Permalink to comment#

    Hi Chris,

    I am a GUI designer. When designing for a mobile site iPhone retina display I traditionally use a resolution of 640×960. When designing for mobile or iPad in PS should I compensate for the hi res display or just design at the 320px (72 DPI)/768px (72 DPI)?

    Thanks for the help.

    Jared

    • Adriano
      Permalink to comment#

      Hi Jared,
      I would work matching one of the highest resolution supported today like the iPad mini retina that is:

      2048‑by‑1536 resolution at 326ppi.

      Then I would export scaled down versions if needed.

  27. Marc
    Permalink to comment#

    Hey there!

    Thanks for the useful info. Im a newbie & hungry for good advice & coming across great content & design inspires me even more.

    I love your input boxes with the images in them! Can you tell me how or where i could find out how to use them?

    Thanks, marc

  28. @kerns

    I really love the idea of a boilerplate snippet for queries, but the portrait and landscape queries for smartphones (more accurately, for iPhones) appear broken in my tests.

    I’m also curious why we wouldn’t want to leverage device orientation for this task… also seems slightly more platform agnostic. Detecting portrait mode would then look something like…

    
    @media only screen
    and (max-device-width: 320px)
    and (orientation: portrait) {
    
    /*-- Styles --*/
     
    }
    
    
  29. Steve Roberts

    I am having problems understanding your approach to this. I have been working with a framework lately and working on a responsive grid system. Maybe I am understanding this differently but I set my responsive parts in a separate stylesheet to another stylesheet I call ‘global’ or ‘base’ where in this goes the main grid system. In this part of your script

    /* Desktops and laptops ———– */
    @media only screen
    and (min-width : 1224px) {
    /* Styles */
    }

    /* Large screens ———– */
    @media only screen
    and (min-width : 1824px) {
    /* Styles */
    }

    you have 1824px which yes is understandable, very large screens, larger then my imac monitor so therefore the grid system can expand. But then you have 1224px, ok this is larger then the resolution of my macbook but 1200px at least is my imac size and to me the standard size of any screen round a bout.

    Now what Im getting at is this example:

    RESPONSIVE STYLESHEET
    /* Desktops and laptops ———– */
    @media only screen
    and (min-width : 1224px) {
    /* Styles */
    #container {width:1170px}
    }

    GLOBAL STYLESHEET
    #container {width:980px}

    Now I feel in my (round a bout) 1200px size monitor, these two sizes are gonna class. Why not delete (min-width : 1224px) and set it at a much larger pixel rate.

    I hope this makes sense. Now here’s how i’ve done it which to me makes more sense. Now between 768px and 1824px I can then create the grid system as normal to whatever size i feel and when it goes below 768px or above 1824px, it changes. But their is no mixing.

    /* Large Desktop and Laptop Screens (devices and browsers) */
    @media only screen and (min-width: 1824px) {}

    /* Tablet Devices, Desktop and Laptop Screens */
    @media only screen and (max-width: 768px) {}

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

    /* Smartphones (portrait and landscape) */
    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}

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

    @media print {}

    The only other idea I have come up with is that your not creating the css anywhere else and the 1224px is what it is but what if a grid is 960 or 980px which is typical.

    Also you have a and (min-device-width : 768px) and (max-device-width : 1024px). I know it’s a device-width, will that not effect it on a desktop or laptop computer?

    Sorry about the blunt questions, but im just trying to understand it and I ask a lot of questions. :)

    • Paul

      Use your base/global style sheet for ‘styling’, and your media query files for the layout dimensions and text overrides. You will never have a problem with clashing of sizes

  30. Jeff H

    Is there a way to distinguish between an iPhone 4 and an iPad 3…? Just using the pixel-ratio doesn’t seem to work…

    Old iPads are distinguished, but not the new ones…

    Thansk,

    JH

    • Mike

      I am just learning, but this might be what you are after?

      /**********
      iPad 3
      **********/
      @media
      only screen
      and (min-device-width : 768px)
      and (max-device-width : 1024px)
      and (orientation : landscape)
      and (-webkit-min-device-pixel-ratio : 2) {
      /* Styles */
      }

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

      /**********
      iPhone 4+
      **********/
      @media
      only screen
      and (min-device-width : 320px)
      and (max-device-width : 480px)
      and (orientation : landscape)
      and (-webkit-min-device-pixel-ratio : 2) {
      /* Styles */
      }

      @media
      only screen
      and (min-device-width : 320px)
      and (max-device-width : 480px)
      and (orientation : portrait)
      and (-webkit-min-device-pixel-ratio : 2) {
      /* Styles */
      }

  31. Gazu

    Hello…
    how can I make a special styles for the Iphone4 retina in landscape position?
    I can apply the portrait.. but when turn my iphone.. this lost the styles

    this is right?

  32. Vic Dinovici

    Gazu, here is how I style for landscape with media queries:

    @media screen and (max-width:480px) and (orientation: landscape){}

    Also to fix the safari bug I put this in the head:

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” />

  33. Gazu

    Thank you very much Vic

  34. Joseph Carr

    We have recently launched a new website that uses responsive design.
    However we are hearing from some users that the site is not responsive on some mobile devices: HTC’s, Window’s phones, etc.

    When I test in an emulator the devices highlighted the site looks fine, but still for some devices it seems not to work.

    Any ideas?

    http://www.zappybaby.be/nl
    http://forum.zappybaby.be

  35. Vishwa

    i can’t use media query in bigcommerce template, did not work, shal i need any java script for it? pls help

  36. Vishwa

    no thanks , now i used media queries well

  37. sonali
    Permalink to comment#

    Hi,

    we are planning a tablet version of our existing website with entirely different content. Now, just want to know the css media query for the same catering all the tablets i.e. android, ipads, noble nook,kindle etc.

    I am new to this field actually.

  38. Marc
    Permalink to comment#

    When I switch from portrait to landscape on my iphone the site doesn’t align properly. It overflows. I have a 480px style set so what else am I doing wrong? Can anybody help me?

    • ToMarc

      You should use percent based values inside of the stylesheet, and set a max and min width for the link to the stylesheets. Everything should be fluid except of the breakpoints, but the viewport above 900/960px can have a fixed value.

    • Gruber

      Maybe i know what’s your issue, on iPhone when you switch from portrait to landscape there is a bug screwing user zoom, therefore it overflows (if i understand your problem correctly). If that’s the case, you have to zoom out to “manually fix it” isnt it?
      There’s a nifty script here http://github.com/scottjehl/iOS-Orientationchange-Fix, that can fix it for the user automatically, and it works pretty well!

  39. Gruber

    hei there i’ve been trying to do something to say sort of “for anything with device-pixel-ratio&gt1 use this” .
    I’ve tried something with the not operator :
    @media not screen and (max-device-pixel-ratio: 1) { stuff }
    Is it worth in your opinion?
    Btw i was wondering if vendor prefixes are still needed for this or just the vanilla

  40. canis

    All this pixel-fiddling does not make sense. With iPad 4 it is clear: you have to ask for the physical size and not for the pixel-resolution. even on a 640-pixel wide iPad a two column design of a web page does not make sense.

  41. canis

    I now realized my responsive web page. See http://mm.ymir.de . It not only adapts to small devices, but also to small browser windows. So just narrow the width of your browser and look how the page changes. Also the pictures are responsive: When loading the page they are loaded according to your window size.

  42. Martin Dubé
    Permalink to comment#

    Have you tested which size (min-width/max-width) can target the new MacBook’s Retina display?
    I’m not sure if this new high definition laptop screen resolution is conflicting with the above media query for “large screens” (min-width : 1824px).

  43. Niall
    Permalink to comment#

    Hey peops, just to let you know that if you’re using Less with the Less.app on Mac, it doesn’t accept the original ‘device-pixel-ratio’ of 1.5 or indeed the opera equivalent of 3/2.
    All device-pixel-ratios need to be 2 only.
    Just thought it might help someone out there!
    Peas and korn.

    Plus, Chris – what is your view on the HTML5 form validation strictness of the URL input type. I really have to include my http:// – really? What is up with that…

  44. JCaveman
    Permalink to comment#

    Marcy is obviously new to web dev.

  45. Will Egan
    Permalink to comment#

    I love you!

  46. Tom Copeland
    Permalink to comment#

    Hey Chris, great info. Any ideas on how to check using PHP for a particular screen size, in this case for an iPhone, or max-screen-size: 320px?

  47. Vishwa
    Permalink to comment#

    I used media query it works in browser when i re-sized my browser, but it not work with mobile device, ipad, android , android mobile screen size width 320px, but it takes @media only screen and (min-width:768px) and (max-width:1024px) this query , what i do?

  48. canis
    Permalink to comment#

    Don’t forget the metatag in the html page:

    And for selection of the design think about using the width and height in inch or cm instead of pixels. See my website

  49. canis
    Permalink to comment#

    meta name=”viewport” content=”width=device-width, initial-scale=1″

  50. swati
    Permalink to comment#

    pls tell me cross browser compatible media query for retina

  51. Vishwa
    Permalink to comment#

    Use ithis website for ur refrense http://css3please.com/

  52. f1ss1on
    Permalink to comment#

    Hey guys, when it comes to responsive there are many ways to accomplish your goals. Probably one of the most easy and common is the way Chris describes here.

    One that I have learned is to use increase max widths to target general smartphone devices such as the Samsung Galaxy 3 and others.

    
    @media only screen  
    and (min-device-width: 320px)
    and (max-device-width : 640px) {
    /* Your Styles Here*/
    }
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Your Styles Here */
    }
    
  53. f1ss1on
    Permalink to comment#

    Umm, what Marcy? Nobody validates HTML anymore? Looks like you may need to work in another field.

    Google loves valid HTML, and so does it’s crawlers. If you don’t have valid HTML, you don’t have a site worthy of indexing. This is one thing that makes HTML 5 so great. It is semantic. Just because it works does not mean it’s working for you or your clients.

    Please refer to this if you have questions.

    Google SEO Test – Google Prefers W3C Valid HTML & CSS?

  54. Marcy
    Permalink to comment#

    Look, I work in the industry and I’m speaking from my personal experience. I know web standards and I write code by hand every day. If I run into a problem I can’t spot easily, validation is one potential tool but no one at my agency validates as part of our regular workflow anymore. That’s just the way I see it.

  55. Dan
    Permalink to comment#

    @f1ss1on: You’re parsing words there. Marcy isn’t saying “dude just write shitty broken HTML, it’s cool! She’s saying you shouldn’t worry too much about validators because they don’t take into account the complexity of our rapidly evolving ecosystem. Validators often puke on code which is perfectly fine.

  56. canis
    Permalink to comment#

    f1ss1on: But what will your code do on a Samsung Galaxy 4 and an iPhone 5? Why do you ask for pixel size instead of physical sizes? It will only save your employment changing the same code again and again to add each new device.

    
    <script type="text/javascript">
        // set size for image processing on server
        function setSize() {
            document.cookie='resolution='+ window.innerWidth +'; path=/';
       }
    &lt/script>
    <meta name="viewport"
        content="width=device-width,
        nitial-scale=1"
    />
    <link rel="stylesheet"
        type="text/css"
        href="css/small.css"
        media="screen and (max-width: 14cm)"
    />
    <link rel="stylesheet"
        type="text/css"
        href="css/medium.css"
        media="screen and (min-width: 14cm)
            and (max-width: 20cm)"
    />
    <link rel="stylesheet"
        type="text/css"
        href="css/large.css"
        media="screen and (min-width: 20cm)"
    />
    <body onLoad="setSize();" onResize="setSize();"&gt
  57. JCaveman
    Permalink to comment#

    Marcy also said that the page fold is a myth. Which is another case in which she is wrong. It has nothing to do with whether people know to scroll or not- it’s the notion of captivating your audience quickly. Putting the right content above the fold entices them to scroll in the first place.

    Sounds like Marcy needs to find a new agency.

    • Dan
      Permalink to comment#

      What I don’t understand is your need to make insulting personal comments like this. Debating ideas is awesome – insulting somebody and questioning their right to practice a discipline is immature and unprofessional.

    • Marcy
      Permalink to comment#

      How about making this more about media queries & sharing knowledge and less about cutting people down? Everyone will benefit from more code and less negativity.

    • Paul

      Page fold is not a digital term … it’s from the days when newspapers (remember them?) were sold on the corner and the publisher used the most exciting stories above ‘the fold’ of the paper to sell them. Print folks evolved into digital and carried terms that were not interchangeable … Browsers scroll, so there is no such thing as above or below the fold … I’ve seen many websites that only scroll left/right, so where is the fold on those? People interact with websites, that’s why we build them, so why should everything be above ‘the fold’? A waste of design ethics when one does that.

  58. JCaveman
    Permalink to comment#

    It is my opinion that misinformation passed around by people in my industry who claim to be experts is one of its biggest downsides. Especially when they present their opinions as fact, like Marcy did. Junior developers are led astray every day by comments from people like this.

    Your responses are over dramatic. I did not personally attack Marcy; she tried to use her agency’s practices to qualify a misguided statement. I responded to it.

    • Dan
      Permalink to comment#

      Again, you’re stating your opinion as fact, and the opinion of others as misinformation.

      If you think I’m being dramatic by pointing that out, I have nothing more to add.

  59. Jcaveman
    Permalink to comment#

    Marcy, I apologize for insulting you. I’ll word my comments differently in the future.

  60. Tim
    Permalink to comment#

    Hi all, becareful with Media Queries! They are not pixel accurate.
    Some times they are off only 20 pixels but other time they are off up to 150 pixels… However, even few pixels is very bad when trying to target a certain mobile phone screen.

  61. vhinmanansala
    Permalink to comment#

    Hi, im wondering why

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

    is not working when i test the site im working using ipadpeek. but works when i removed the “device-” is there any difference between them? thanks, this is my first time developing responsive website so im a little confused. please guide me.

  62. MIhail Yakimenko
    Permalink to comment#

    Today this article very help me :) Thanks!

  63. Surya Osborne
    Permalink to comment#

    Vhinmanansala, I am just reading Ethan Marcottes Responsive Web Design and he mentions that min-width and min-device -width are two different things. I guess the essence is that a screen is not considered a device.

  64. Lil Fab
    Permalink to comment#

    Hey guys.. i need your help..

    when i try to use this code..
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

    }

    but.. when i change the code to..
    @media only screen and (min-width : 768px) and (max-width : 1024px){

    }

    it can be work correctly.. i’m so confuse bout what is happen with that.. please explain to me..

    btw,this is my blog http://idwds.blogspot.com who i work for progress..please check

  65. Lil Fab
    Permalink to comment#

    Hey guys.. i need your help..

    when i try to use this code.. it doesn’t work correctly
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

    }

    but.. when i change the code to..
    @media only screen and (min-width : 768px) and (max-width : 1024px){

    }

    it can be work correctly.. i’m so confuse bout what is happen with that.. please explain to me..

    btw,this is my blog http://idwds.blogspot.com who i work for progress..please check

    • Chathura Wijekoon
      Permalink to comment#

      Dear Lil Fab,

      It depends on your approach to code. Actually it really works fine without the term “and (orientation : portrait)” because in most devices it is the default view. But in some cases (there may be), when the device is kept horizontally, the CSS code should be changed. It depends on your design + the way of coding. Mostly if you use “Percentage values” for specifying width, margin as well as padding, the removed term is not needed. But if you mention the values in “PX” (Pixels), you have to use both “(orientation : portrait)” as well as “(orientation : landscape)” separately.

      Thanks!

  66. Digamber
    Permalink to comment#

    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    /* Styles */
    }

    I used this option to hide some elements for one of my site.
    It works fine for iPhone but doesnot work on other android phones

  67. Pamela
    Permalink to comment#

    I have been using it like this to make it web & mobile responsive.

    @media only screen and (min-width: 0px) and (max-width: 480px) { 
    .wrapper {margin: 0 auto; max-width: 98%}
    
    container {margin: 2% auto; width: 96%}
    
    }
    
    @media only screen and (min-width: 481px) and (max-width: 719px) { 
    .other_sized_properties
    }
    
  68. isaac
    Permalink to comment#

    What if I want the same Media Query to target the iPad AND the desktop (max-width: 768), without duplicating the code? How to do that?

  69. damu
    Permalink to comment#

    You yourself seems to be doing other way round. from larger screen to smaller one. not mobile first.

  70. spike
    Permalink to comment#

    I always use this post as a reference, but what about the new 7-inch devices?

  71. Webbyra
    Permalink to comment#

    I also use this as a reference… but as spike said how about the new 7″ Nexus and the iPad Mini. What is the best with for this?

  72. Colin
    Permalink to comment#

    If anyone here needs a way to quickly generate valid custom media queries or need to look up other device specific presets, I wrote a free media query tool called Media Query Builder which you can find here -> Media Query Builder

  73. Ben
    Permalink to comment#

    You seem to be missing the ability to target both ipad and iphones:

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px), 
    @media only screen and (max-device-width: 480px {
    
    }
    
  74. Ravi Suryawanshi
    Permalink to comment#

    This is information is helpful, but is there any way to write minimum media queries and work on all size devices.

  75. tim
    Permalink to comment#

    Great post, very handy.

    I just found something strange that might save people a lot of wasted time with media queries on Android devices:

    I’m developing a mobile site and for some reason, a 540×960 phone running Android Jellybean would only pick up the 360-459px wide stylesheet. When I commented out this stylesheet from the header, the phone totally ignored the others, even the one that specifically targets it’s resolution.

    <link rel="stylesheet" type="text/css" media="only screen and (min-device-width:540px) and (max-device-width:800px)" href="mob_vhigh.css"/>
    <link rel="stylesheet" type="text/css" media="only screen and (min-device-width:480px) and (max-device-width:639px)" href="mob_high.css"/>
    <link rel="stylesheet" type="text/css" media="only screen and (min-device-width:360px) and (max-device-width:479px)" href="mob_mid.css"/>
    <link rel="stylesheet" type="text/css" media="only screen and (min-device-width:0px) and (max-device-width:359px)" href="mob_small.css" />
    

    After a ton of research, it turns out that the default browser zoom setting does not actually zoom in the browser per se, but rather ignores it’s physical resolution, and pretends to have a smaller one. After some experiments:

    • ‘Close’ zoom loads ‘small.css’,
    • ‘Medium’ zoom loads ‘mid.css’ and
    • ‘Far’ loads the proper stylesheet for the screen’s actual resolution.

    It would appear there is no way to force the user’s browser to load the proper size stylesheet if their settings are different. Just thought I’d share this, it’s wasted a lot of my time, and finally I can move on :) Hope it helps

    • Tim
      Permalink to comment#

      Hi again, here’s a few more things I’ve since learnt about the subtleties of Android devices:

      There are several attributes that can be applied the the tag that alter the way they handle zoom. One of these is: content="target-densitydpi=device-dpi"

      What this does is prevents the device from zooming on the page when it loads. This solved an irritating zoomed-on-load issue I suddenly had with the iPhone 4s. Users can still scale (if you’ve allowed it), it merely targets the device’s actual DPI rating, instead of relying on the often unpredictable automatic zoom. My meta tag now looks like this:

      &lsaquo;meta name="Viewport" content="target-densitydpi=device-dpi, width=device-width"/&rsaquo;
      

      This allows for the layout to adjust completely based on any display. The only hitch is the OS. For some reason, I can’t for the life of me get it to load on a HTC 7 Trophy windows phone without being zoomed in. Any thoughts? This is the only OS that seems to cause problems now. Even Blackberries work fine.

      In another tweak, I’ve updated my media queries in an attempt to ignore most tablets while still catering for ludicrously high-DPI phones, such as the HTC Droid DNA (1920×1080, wow). To do this, I’ve simply added another media query with a new condition below the main one:

      &lsaquo;link rel="stylesheet" type="text/css" media="only screen and (min-device-width:540px) and (max-device-width:960px)" href="mob_vhigh.css"/&rsaquo;
      &lsaquo;link rel="stylesheet" type="text/css" media="only screen and (min-device-width:961px) and (min-webkit-device-pixel-ratio:2) and (min-device-pixel-ratio:2)" href="mob_vhigh.css"/&rsaquo;
      

      This way, the phones load like normal, but any display larger than 960px must have a very high DPI display to access the styles, so hopefully this will be phones only. It’s not perfect, as I haven’t had a chance to try it on the Retina iPad (DPI anyone?), but it is designed to quickly provide a clear divide.

      Rather than try and guess how high-res the next generation of phones will be, and have the site inevitably break on some new device in the future, I thought it made more sense to simply allow no limit and instead exclude the devices I didn’t want by using media queries. Having your mobile layout designed for small screens appear on a iPad makes you feel like a spoon-fed kid, as the buttons are now big enough to smash with your fists instead of point with a finger.

  76. Mike
    Permalink to comment#

    I found that some of the media queries here a bit haphazard. For example, the smartphone landscape query is min-width:321px my desktop browser when larger then 321px wide will run the stylesheet intended for smartphones. Seen how iOS+Safari doesn’t consider itself a handheld device, using @media handheld and (... does not work, so I found that some were clashing with others were they shouldn’t have been. After many frustrating hours I went looking and found this question on Stack Overflow, Media query ipad vs iphone4

    The media queries are being used to specifically target a device width, pixel density(css ratio) and the orientation. Leaving very little for one device to use another stylesheet not intended for it. Although this maybe slightly more to write out, you get the consistency across all devices and I have never had any headaches using this method since.

  77. Gustavo C
    Permalink to comment#

    I am pretty new with media queries. I have a website I am creating a mobile version for. When I check the site in iphone 4s portrait, 320px wouldn’t cover 100% the width. I need to push it to 375px to make it cover the width of portrait view. Any suggestions?

    I am using: inside code
    and html { -webkit-text-size-adjust: none; } inside css
    the media querie I am using is:
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)

    Great Blog!! Thanks in advance

  78. viv
    Permalink to comment#

    I have tried the same media queries for wordpress test site loaded on localhost. I used online responsive design tool http://ipadpeek.com/ . This tool fails to catch landscape and portrait mode queries. But while I tested localhosted wordpress site directly by changing screen resolution of my pc with windows 7 in portrait and landscape its works.

  79. Carlos
    Permalink to comment#

    I know article is from a while back, but has anyone had an issue with “max-device-width” and having rendering issue.
    My impression was that the “max-device-width” only rendered on phones, tablets, and mobile devices, not on desktop browsers.
    This happens when the browser is set and the initial load of the css file with the @Media query loads.
    So if I have

    @media screen and (max-width:500px), screen and (max-device-width: 1280px){/* My mobile styles here */}
    

    the desktop browser or screen resolution of the desktop is set at 1280px, it will actually render the 1280px styles mobile styles and not the desktop styles. Did browser makers roll “max-device-width” into their browser builds? Any pointers or insite would be great.

    Thanks.

  80. Mittal
    Permalink to comment#

    Hi!

    You have used proportion for iPhone 4, but what proportion will work for iPhone 5?

  81. Chris Dill
    Permalink to comment#

    I have built my first truely responsive site, with a lot of help from CSS Tricks. I built it in SCSS with lots of media queries using breakpoints as outlined by Chris C. My question is- I have only user min-width and max-width (No min-device-width or max-device-width). Is this incorrect? As far as I can tell my site is working fine across all devices, though testing UserAgents is a pain. Most of my testing comes from resizing the browser in Chrome, IE and FF, and then using Chrome Dev Tools to test on Galaxy Nexus and also on my wife’s iPhone. Here is an example of my breakpoints.

    @mixin breakpoint($point) {
      @if $point == 1600 {
    
    @media (max-width: 1600px) and (min-width: 1280px) { @content; }}
    
    @else if $point == 1280 {
    
    @media (max-width: 1280px) and (min-width: 1024px) { @content; }}
    
    @else if $point == 1024 {
    
    @media (max-width: 1024px) and (min-width: 800px) { @content; }}
    
    @else if $point == 800 {
    
    @media (max-width: 800px) and (min-width: 640px) { @content; }}
    
    @else if $point == 640 {
    
    @media (max-width: 640px) and (min-width: 320px) { @content; }}
    
    @else if $point == 480 {
    
    @media (max-width: 480px) and (min-width: 320px) { @content; }}
    
    @else if $point == 320 {
    
    @media (max-width: 320px) and (min-width: 0px) { @content; }}
    
    }
    
    • Martin
      Permalink to comment#

      I am entirely new in this topic. But this seems very interesting. Could you drop an example what the @content does mean and/or where and what shall be stated in it?
      Thanks a lot.

    • Chris Dill
      Permalink to comment#

      Martin- Sure! With the above code, I can use SCSS and mixins to easily make my site mobile responsive. Rather than creating a huge block of CSS at the bottom of my stylesheets and putting all my mobile CSS there, I add in my mobile CSS as I design my normal CSS. I then use a gem which moves everything to the end for production. Moving forward with the above breakpoints, my CSS might like like this:

      .region-menu .navigation ul.inline, ul.links.inline {
              @include breakpoint(640) { display: block; float: left; padding-left: 0; width: 160px; }}
      

      As you can see, when SCSS compiles my style sheets, it will yield the following CSS:

      @media (max-width: 640px) and (min-width: 320px) { 
      .region-menu .navigation ul.inline, ul.links.inline { display: block; float: left; padding-left: 0; width: 160px; }}
      
    • Chris Dill
      Permalink to comment#

      My above illustrations was simple… but when you use this for an entire site it becomes super powerful. When I need to go back and edit the screen width of one div only on mobile devices at 640px, I simply go to that class in my CSS and make changes- I don’t need to scroll through a page of mobile CSS to make changes.

      As Chris Coyer said the above way(using mixins and SCSS) is the way your brain wants to connect the dots, so why organize things differently. Since I have started to do this, I can just code mobile as I go. I can put together a sites CSS and responsive all at once, rather than two separate items.

    • Anas Abudayah
      Permalink to comment#

      Thanks it’s work with me without frameworks :)

  82. Christian
    Permalink to comment#

    Hi Chris. Great article. I often refer back to it. I was just thinking that a lot has evolved and come about with mobiles and tablets since you wrote this article back in October 2010. Smaller tablets have been released and some mobile resolutions have gotten bigger. Has this blurred the lines somewhat with your advised media queries for different devices? Or would you say it’s largely unchanged?

  83. Chris Hunt
    Permalink to comment#

    I’ve been doing some testing on this and using a sony xperia s it seems to think that device width changes with orientation (720px then 1280px).

    This would lend one to use something like this to target Android:

    @media only screen 
    and (min-device-width : 720px) 
    and (max-device-width : 1280px)

    The problem with this is that it overlaps with the iPad and using min-device-pixel-ratio is not enough to separate them when you get to the iPad 3 as they both have that as 2

    Does anyone know how to make android behave and yet not get my mobile site to appear on the ipad.

    Reading this article http://stackoverflow.com/questions/12061127/css-media-queries-on-nexus-7-display-resolution-not-working-in-code lends one to think that actually Android is going to be a swine!

    Thanks
    Chris

  84. Martin Dubé
    Permalink to comment#

    IF NOT TOUCH = standard desktop

    Because browser vendors don’t support the “NOT” selector from W3C I had to rely on JavaScript / jQuery to isolate the CSS that I didn’t want to show on iOS and Android device.

    <script type="text/javascript"> 
        //detect if browser supports touch
        var is_touch_device = 'ontouchstart' in document.documentElement;
        if(is_touch_device){
            $('body').addClass('touchDevice');
        }else{
            $('body').addClass('notTouch');
        };
    </script>
    
  85. Sandeep
    Permalink to comment#

    This article is awesome. I am gona use it.

  86. Martin Dubé
    Permalink to comment#

    This detailed browser compatibility table of the viewport (and some related items) from Peter-Paul Koch will help anyone interested in this subject in separating the facts from the utopias.

    http://www.quirksmode.org/mobile/tableViewport.html

  87. Gajen
    Permalink to comment#

    Thanks for sharing this great article…

    but how can we use pixel-ratio mediaquery?

    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }
    
  88. Chris Hawkes
    Permalink to comment#

    I have a website Noobpost I’m trying to figure out how many media queries max-width sizes I should use, right now I have four, but it doesn’t seem to work well with landscape views. It also appears I need to position everything in a percentage to make it more fluid.

  89. Al
    Permalink to comment#

    Any advice on what to do for large screens?

    /* Large screens ----------- */
    @media only screen and (min-width : 1824px) {
    /* Styles */
    }
    

    I’m particularly concerned about line length becoming unreadable.

  90. Chris Dill
    Permalink to comment#

    You could always just keep the content centered (or left aligned) on the page at a normal width, say 960 or 1024px which would allow it to be readable. To fill up the extra space on the sides you could use a gradient, clever shadows, or some images to “fill” up the blank space. My site maxes out at 960px so it looks the same on 1600 wide monitors, and 1900 wide monitors and beyond. A word of advice- when designing for large screen, testing or actually designing for a large screen is really helpful- it is hard to visualize a large screen when working on a 13″ laptop.

  91. Biju Subhash
    Permalink to comment#

    Hi, I have some question, in ipad protrait mode…
    you have specified the min-device-width:768px and max-device-width:1024px and orientation portrait and the same values you given for landscape too. Actually, when viewing with portrait in ipad the max-device-width will be 768px right? How the max-device-width be 1024px.

  92. Conor
    Permalink to comment#

    Is there a correct meta tag to go with this? I’m trying to target the iPhone4 and below screen widths (and not the iPad2 and above screen widths). But this isnt even working for iPhone4’s..

  93. Colin Daniel Lafferty

    This is an informative article however i would approach responsive design much the same as we currently do for fully fluid layouts. My personal approach is semi fluid in nature with responsive design only to enhance the content.

    If for example we apply a fixed width on the container (div as the most semantic selector) Then we can simply target that by simply applying a max width, minimum width and auto for backwards compatibility. Of course will work for semi modern browsers this is the best option in my opinion. We can scale this up or down based upon a percentage and change the width constrictions and there we have a complete fluid and responsive design.

    Of course other elements needs to be specifically styled, rearranged or sometimes hidden (i would not recommend) by using media queries.

  94. chris

    Hi,
    I am working on a website to make it responsive.

    1) Mobile phones including iphone series using a css file (includes portrait and landscape layouts with @media),

    2) Tablets & ipads using a css file (includes portraits and landscape layouts with @media),

    3) and desktop version css (which for large, medium and small break points usig @media spearated.)

    Is there a way to accomplish the complete workaround some thing like this

        link href="desktop.css" rel="stylesheet" media='screen and (min-width:100px) and (max-width:1280px)' css file for desktop version
    
        link rel="stylesheet" media="only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1)" href="ipad.css" for ipads & tablets
    
        link href="iphone.css" rel="stylesheet" media='only screen and (max-device-width : 650px)'  for mobiles, iphones only
    

    I know I might be wrong here, as I am very new to this.. Please help me.

    Thanks in advance

    Chris

  95. Tom
    Permalink to comment#

    CSS-tricks saves my day once again! Thank you!

  96. Rafiul Alom

    What’s the best solution for IE8 or bellow browser support for media query?

  97. Xavier
    Permalink to comment#

    Hello, what about new smartphone with high resolution such as the sony xperia Z for exemple.
    Its resolution is 1920 × 1080, this will be a problem isnt it ?

    • Mohamed
      Permalink to comment#

      @media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px) and (orientation : landscape) { }

      @media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1080px) and (orientation : portrait) { }

  98. aneeskodappana
    Permalink to comment#

    this is an useful information about responsive web design!
    W3schools.com has missed about real media queries !

    • John
      Permalink to comment#

      Thanks for this guide. I am trying to figure out why you specified orientation for ipad, but not for smartphone..

      Shouldn’t the smartphone media queries look like this:

      @media only screen 
      and (min-width : 321px) and (orientation : landscape)
      {
      /* Styles */
      }
      
      @media only screen 
      and (max-width : 320px) and (orientation : portrait)
      {
      /* Styles */
      }
      

      Instead of:

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

      It seems you omitted the orientation from these smartphone media queries, but specified them for ipad? Is the orientation needed for phones or only tablets?

      Thanks,
      John

  99. Alex Goretoy
    Permalink to comment#

    http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32

    /* Smartphones (portrait and landscape) ----------- */
    $media-smartphone-portrait: "only screen and (max-width : 320px)";
    $media-smartphone-landscape: "only screen and (min-width : 321px)";
    $media-smartphone-portrait-landscape: "only screen and (min-device-width : 320px) and (max-device-width : 480px)";
    
    /* iPads (portrait and landscape) ----------- */
    $media-tablet-ipad-portrait-landscape: "only screen and (min-device-width : 768px) and (max-device-width : 1024px)";
    $media-tablet-ipad-landscape: "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)";
    $media-tablet-ipad-portrait: "only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)";
    
    /* Desktops and laptops ----------- */
    $media-desktop: "only screen and (min-width : 1224px)";
    
    /* Large screens ----------- */
    $media-large: "only screen and (min-width : 1824px)";
    
    /* iPhone 4 ----------- */
    $media-iphone-4: "only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)";
    
  100. Damir
    Permalink to comment#

    Great article man, yes it’s been 3 years since the article was created but I still find it useful :)

  101. Matthew Stapleford
    Permalink to comment#

    I have used these media queries a few times now so very thankful that this great resource is available.

    Thought I would just share that it helped me to resolve a few style issues to swap the portrait and landscape smartphone media queries around so that for the smartphone media queries it went:

    Smartphones (portrait and landscape)….

    Smartphones (portrait)….

    Smartphones (landscape)….

    This helped to stop some of the styles being over written on some phones.

    ipad and everything else seemed to work just fine as they are.

    • Matthew Stapleford
      Permalink to comment#

      ok, just ignore my comment above about swapping the media queries around. I have just noticed a missing } which was causing the styles that followed the missing } not to work. Doh! Should have seen that one!

  102. Griffen Fargo
    Permalink to comment#

    This is just one heck of a nice resource to stumble upon!

    Thanks again CSS-Tricks, you guys continue to produce quality workI I use on a daily basis!

  103. Amani Icy
    Permalink to comment#

    hi , iI have just tried this snippet some how it is not working for me. It doesn’t set the right CSS based on device or when i resize the screen in my browser. So below is what works s fine for me. It allows me to apply css on both Phones and desktop with small / resized screen size

    `@media only screen and (max-width: 480px), only screen and (max-device-width:480px) {}//for mobile phones
    @media only screen and (max-width: 768px), only screen and (max-device-width:768px) {}//for tablet with medium screen
    @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {}//for tablet with large screen`
    
  104. Al Lemieux
    Permalink to comment#

    When using device-width, can that be tested in the browser?

  105. Chris Dill
    Permalink to comment#

    Al,

    I know this is perhaps not the answer you were looking for, but why do you need device-width? Do you have a specific reason for using it? I normally build my sites using Min/Max width which I code in using SASS breakpoints, and when I go to production I leave them be. The only way in which I could see myself using a device-width tag would be for some sort of mobile app based on HTML.

    With Min/Max width, you are also allowing for new devices as they emerge, no matter what the device dimensions are. I like to develop for all sizes- meaning that as I use breakpoints I want my sites to look 99-100% at every width, even if it is in between normal device widths. With Min/Max width you can test this by dragging your browser around.

    In other words- unless you can name a reason to use device width, stick to Min/Max width.

  106. ramesh
    Permalink to comment#

    hello i have Problem in media query

    i have use two media query

    1
    @media only screen
    and (min-width : 768px)
    and (max-width : 1024px)
    and (orientation : portrait) {}

    2.
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape) {
    }

    => I have work this condition proper but when i rotate device from landscape to portrait or portrait to landscap at that time condition not taken without page refresh…

    • Ri
      Permalink to comment#

      add <meta name="viewport" content="width=device-width"> in the head

  107. Frank
    Permalink to comment#

    Specific style for specific query why it’s not working without important

    for example

    @media only screen and (max-width: 320px) {.class1 { width:100%;} }

    @media only screen and (max-width: 480px) {.class1 { width:60%;} }

    @media only screen and (max-width: 768px) {.class1 { width:80%;} }

  108. Patrick Chester
    Permalink to comment#

    I haven’t tried this code yet but does anyone know if this works?

  109. Lee Design
    Permalink to comment#

    Hi Patrick and Frank– given the evolving nature of mobile platforms, fixed widths are less flexible than percentage settings- so describing a set dimension now may well compromise A N Other platform in the future. And make more work for you.

    Thus a % dimenion is better than a px setting.

    Good Luck!

  110. Nagarajan
    Permalink to comment#

    Hi All,

    Kindly advice screen width for Nook Color device

    With Advance Thanks,
    K. Nagarajan

  111. john
    Permalink to comment#

    Does this work with 5 years old mobiles as well?

  112. Daniel
    Permalink to comment#

    While previously I’ve tweaked ready-made solutions for responsive web apps, 2013/2014 are for me, professionally, the years of building responsive markup from the ground up for SharePoint 2010 and 2013. I’ve used these @media queries with great results. They work on nearly ANY mobile device, provided the device’s viewport resolution fits these parameters. Using these queries you can hide/display content containers (div’s and whatnot) to create distinctive experiences for your users, based upon the device they use to access your web app.

    I’m VERY impressed with this site’s responsive design, not just how the content changes widths but the attention you guys have paid to EVERY piece of the UI, especially the nav and the banner ad. Really impressive, CSS-Tricks, I’m subscribing and look forward to gleaning a lot. Great job.

  113. Thiyagarajan Harish
    Permalink to comment#

    This tutorial is really good but why doesn’t this media queries working in ie9 is there any special code 2 make it happen………

  114. yennefer
    Permalink to comment#

    So what about new bigger smartphones, do we still use max-width: 480px? But their resolution is much bigger now, with iphone 4S having 960px and latest Nexus much higher – does it mean on those devizes users will see desktop version of the site? I’m a bit confused

  115. Daniel Kemper
    Permalink to comment#

    A very informative page to which I continue to refer, thank you!

  116. Paul

    min-width, min-device-width, max-width, max-device-width, min-height, min-device-height, max-height, max-device-height are all different.

    If you use min-device-width or max-device-width, make sure you are also defining min-width and max-width (same goes if you’re targeting height, and yes people targeting heights does work).

    Also at the very minimum use this in your head section but preferably use this

    If you use only @media only screen and (min-width: NNNpx) and no max, expect troubles but they are solvable … try to break your code to what is the architecture (dimensions and sizes) and what is design (colors and imagery) and have separate files … Architecture files should have min/max defining start and stop points, while min- can carry design element transformations upward (or downward depending on if you start mobile first or not).

  117. Paul

    min-width, min-device-width, max-width, max-device-width, min-height, min-device-height, max-height, max-device-height are all different.

    If you use min-device-width or max-device-width, make sure you are also defining min-width and max-width (same goes if you’re targeting height, and yes people targeting heights does work).

    Also at the very minimum use this in your head section but preferably use this

    If you use only @media only screen and (min-width: NNNpx) and no max, expect troubles but they are solvable … try to break your code to what is the architecture (dimensions and sizes) and what is design (colors and imagery) and have separate files … Architecture files should have min/max defining start and stop points, while min- can carry design element transformations upward (or downward depending on if you start mobile first or not).

  118. Paul

    seems to be a problem accepting code …

    Also at the very minimum use this in your head section <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> but preferably use this <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi”>

  119. sam

    Hello,

    I just need to add this css in my style and thats it?

    • Zeshan Ahmed

      Yes, and add styles of course. Just in case you don’t know, you also need to add a View Port meta tag in your of html file.

  120. ALIREZA

    your website is very helpful. when i have any problem in web designing in see your ideas and they are almost perfect.
    thank you man.
    thanks GOD because we have someone like YOU.

  121. Anthony

    hello, my website isnt responsive. i am using joomla 3.3.0, how can i make this responsive, which when open in a mobile device it will fit on its screen size and not changing or shuffling any images, it should be look like exactly as it is in the desktop browser. can anyone help me?

  122. Anhony

    I’ve found it, I just remove the width=device-width in the meta tag at index.php and viola! my website fits on the screen without any @media tags!

  123. Michael Jon Ward

    Just what I was looking for, many thanks! Developing a funky calendar that just won’t work on a mobile… Well, not yet anyway! ;)

    • Trevor Franks
      Permalink to comment#

      Funky calendar for a mobile just add This stops the keyboard from opening

  124. Hany Sobhy
    Permalink to comment#

    Hello,
    Does iPads (portrait) query target only portrait?
    or it should be :

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

  125. Jon

    I built this into a quick site so thought i’d share it. Very basic, changes colour and content when the screen is re-sized. http://demo.slickdesign.com.au/responsive-template/

  126. Gerard
    Permalink to comment#

    Let me share my @media queries. I’m using this scheme on my own WordPress theme and at the moment it’s working very well. What do you think of it?

    @media only screen
    and (max-width : 1024px) { }

    @media only screen
    and (min-width : 769px)
    and (max-width : 1024px) { }

    @media only screen
    and (max-width : 768px) { }

    @media only screen
    and (min-width : 481px)
    and (max-width : 768px) { }

    @media only screen
    and (max-width : 480px) { }

    @media only screen
    and (min-width : 321px)
    and (max-width : 480px) { }

    @media only screen
    and (max-width : 320px) { }

    It’s important to remember that max-width and min-width include the pixel referenced. For example, min-width: 768px includes the 768px position, the same occurs with max-width: 768px. It’s used twice and we have less control. On these cases, it’s better to add one pixel more to the min-width; for example, min-width: 769px.

    Scheme:
    = 769, <= 1024
    = 481, <= 768
    = 321, <= 480
    <= 320

    • Adam
      Permalink to comment#

      Thanks a lot Gerard! This was really helpful.

    • Pali Madra
      Permalink to comment#

      Thank you Gerad for sharing the code. It is handy.

    • Bryn
      Permalink to comment#

      Yes this is critical if you are showing and hiding certain elements using css. I would not use “-device-” or when you resize the browser it will look horrible. Just an FYI. I never use “-device-“, I don’t see the point because all devices will fall into the above @media queries that Gerard posted. Keep these on file and thanks for sharing.

    • Laura

      Hi… Do you have this posted somewhere online where I can bookmark it to find fast please?? I am looking for an online guide that I can use for reference for current and future projects as it appears that this one is out dated. Thanks in advance for your reply.

  127. Gunnar
    Permalink to comment#

    Hi,

    I’m wondering why so many different pixel-sets of different media-querys exists to somehow cover every potential screen resolution. What will happen if in maybe one year a complete different resolution will be required because of new hardware? Isn’t there a way to be more flexible and to work with proportions of a screen based on the actual font-size… e.g. with the attribute “em” ?

  128. Michele
    Permalink to comment#

    I’m using @media only screen and (max-width: 768px) etc. in my css file, but I want images in my main html pages to show or not show depending on the screen size. How do I control that? Have you done that before? I just want to pop in a different image if screen size is smaller than the 1024px.

  129. vir s
    Permalink to comment#

    hi guys,
    here you can use the following for devices:
    @media query only screen and (max-device-width: 480px){
    /*your styles for a 480px device*/
    }

  130. Muhammad Kashif
    Permalink to comment#

    Hi

    my problem is that when i use @media (max-width: 320px) then page works fine . but below that . when i write code for @media (max-width: 800px) then 320 does not work just @media (max-width: 800px) works fine ,,,,in short both doesnot work at the same time
    anyone can answer ?
    will wait :)

  131. Mar
    Permalink to comment#

    Hey Chris, thank you for your useful work!
    Will you upgrade this post in the near future?
    Bye

  132. tozman
    Permalink to comment#

    Muhammad,

    Use the word and between the different conditions
    examples :
    @media (min-width: 321px) and (max-width: 800px) {}
    @media (max-width:320px) {}

  133. Nitesh
    Permalink to comment#

    can you please tell the media query for Ipad mini. The media query for IPad is not working for IPad mini. Please help me for this

    • Nitesh
      Permalink to comment#

      @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1){

      }

  134. manoj kushwah
    Permalink to comment#

    You are right but my problem is a responsive media in overview for tablet and iPhone in use your media query not smartness.

  135. adnan
    Permalink to comment#

    Hi,
    I am trying many media query but my website not convert in responsive style in Samsung Galaxy S3, on all devices site open in responsive style.

    any one can tell me right method and right media query for Samsung Galaxy S3.

  136. Kevin Jackson
    Permalink to comment#

    How do responsive design code writers address phones that have more pixels wide than the old phones did. For instance, my cell phone (ZTE Warp Sync) has dimenions of 1280 x 720 pixels (not the tiny 340px Ive been seeing in tutorials and sample codes) with a pixel density of 293.72. 1280 (landscape) nor 720 (portrait) is considered phone size any of the media queries I’ve been seeing. Some of this code would render a site I make like a desktop, rather than a phone unless I’m missing something.

  137. laminlay
    Permalink to comment#

    how to write responsive template step by step tutorial

  138. laminlay
    Permalink to comment#

    hi

    my code not work @media (max-width:320px) {}

  139. Michael
    Permalink to comment#

    Hello folks.
    I want to target a certain device using a specific browser.
    Now how do I accomplish that? do I nest the media queries?
    example:

    @media screen and (min width) and (max width) {
    @media (-webkit- etc) {
    }
    } 
    

    The device is nested in the screen parameters.

    Excuse the code, but you get my point.
    Or do I use

    @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width : //px) and (max-width : //px)
    

    So far I have had no luck with both.

    Any help will be appreciated.
    Thanks,
    Michael

  140. Antonio
    Permalink to comment#

    So, it’s seem to me that I’ve been the whole time setting the breakpoint false:

    @media(max-width:768px)
    @media(min-width:768px)

    I thought that was the propper way. I have had a lot of problems with devices 768px wide. Now I know why :|

  141. Patrick
    Permalink to comment#

    Hi,
    i have a little question. I wrote this in my HTML-Code:

    This is only an example. My problem is that when i write an other alternative stylesheet with the same code like i wrote in this comment, the stylesheets don’t overwrite the others when I change the browser-width oder -height. Is this the mistake: …(min-width: 0px, max-width: 800px)” ?
    Must i write the code like this: …(min-width: 0px) and (max-width: 800px) ?
    Hope my english is good enough to understand me.
    I would be lucky about an answer.
    Thank you

  142. surender sharma
    Permalink to comment#

    HI i am using (landscape and portrait) for screen size (1024×768). But again when i am using this method for screen size (736×414) then it’s not workign. Any Suggestion ? and also plz tell me that is this method can see in desktop browser?

  143. cn arabia
    Permalink to comment#

    Hi! is this code works with mini iPad please
    /* iPads (portrait) ———– /
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait) {
    /
    Styles */
    }

    if not please i need it thank you .

  144. Shahbaz Akhtar
    Permalink to comment#

    Thank a lot is working fine.

  145. David Englund
    Permalink to comment#

    I am using the Responsive Theme. What if I want to hide my sub-menu items on the desktop, but show them on the mobile? I use the “Responsive Menu” plugin for mobile, which provides a nice slider expand/collapse look for menus there. But, on the desktop I don’t want sub-menus to show. The main menu items (e.g., About) will take you to that section/page of the website, where a sidebar navigation will then be used from that point on for all the associated pages.

  146. zan
    Permalink to comment#

    Thanks for this. Really helpful. :)

  147. tamtam
    Permalink to comment#

    And why there is no Windows phone devices ?

  148. JT
    Permalink to comment#

    Chris is a superstar of a CSS pro, but also a very nice dude. I emailed him a couple of times and he always responded to me. I give you and Paul Irish a lot of props.

    In the previous version of this article, Chris put everything in one big section. It was very helpful. I did the same thing below…

  149. Natalie
    Permalink to comment#

    Thanks for the updated queries, they work great.

  150. Najeh
    Permalink to comment#

    And why there is no Windows phone devices ?

  151. Brian

    Hi,

    I have a general question regarding media queries.

    Is it possible to target individual screen sizes instead of using min-width and max-width etc…

    I would like to start on the laptop sizes:

    1024 x 768

    up to

    1920 x 1080

    Then eventually work into mobile devices, but I found it particularly difficult to target that way. I have tried lots of ways but it just seems that if I use min-width, max-width for example, I usually end up changing the styles for several resolutions with only one media query. Any solutions to this? I know a lot of you go through this (when starting out), but what have you done to resolve this issue? Any tips and/or suggestions?

    Thank you
    Brian

  152. Carlie

    Hello.

    I have two div containers for food menu items. One is called menu-container and is a class the other is mobile-menu and is an id. I want to show just .menu-container on the desktop and just #mobile-menu on phone and tablet. I have the max-width set to 1047 and the min-width 1048. When I view it mobile everything looks and works great but when I view it on the desktop both menus show.

    This has been driving me crazy and I am not sure how to resolve this issue.

    Thanks,
    Carlie

  153. Greggman

    These media queries don’t seem to work on iOS 8.3 (haven’t tested older OSes). Unless I’m missing something. For example here’s a simple test. For iPhone4/4s the background should be red. For anything larger it should be blue.

    But it ends up being red for iPhone5/5s, iPhone6, iPhone6Plus. It’s blue for iPadAir, iPad Retina, Desktop.

    How do I get it work for iPhone4/4S only? (basically shorter screens)

    <!DOCTYPE html>
    <html>
    <head>
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
      <meta name="HandheldFriendly" content="True">
      <meta name="MobileOptimized" content="320">
      <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
      <meta name="format-detection" content="telephone=no" />
    <style>
    body { background-color: blue; }
    
    /* ----------- iPhone 4 and 4S ----------- */
    
    /* Portrait and Landscape */
    @media only screen
      and (min-device-width: 320px)
      and (max-device-width: 480px)
      and (-webkit-min-device-pixel-ratio: 2) {
      body { background-color: red; }
    }
    </style>
    </head>
    <body>
    Testing
    </body>
    </html>
    
  154. wady

    I wrote the 4 standard media queries with bootstrap.It is ok.
    But it is not ok in pixels between the media queries because I used padding or margin.
    How I can solve this problem and are many other media queries?

  155. mukesh
    Permalink to comment#

    hi i wants to now media query for the landscape and Portrait width and height

  156. hiremwfor.com
    Permalink to comment#

    This is really good!!

  157. Luke
    Permalink to comment#

    Thanks for the write up. This is a great resource!

    Is it possible to target a particular screen width AND HEIGHT? For instance, we’ve developed a touch screen kiosk/web app that’s nothing more than a responsive website tailored to a specific touchscreen monitor width and the usual mobile sizes. The issue comes in the “bleed-over” of target sizes via min- and max-widths causing a layout fix on the touchscreen to break the layout on mobile devices. If there’s a way to target a specific width WITH a specific height, that might fix our issue.

    Any help would be greatly appreciated!

  158. Nate
    Permalink to comment#

    It seems like the best idea is to choose the widest portrait of the cell phones and simply make ALL portrait-size mobile device design start at that size. Rather than collapsing columns and stuff at 480px, you’ll do it at 736px width instead because of of the iPhone 6.

    That’s the simplest.

    But, isn’t there something much simpler that Zurb Foundation is doing? And what about device-aspect-ratio instead of pixels?

  159. Ken Swarthout
    Permalink to comment#

    Man, I’m having trouble with this media query stuff. I followed a tutorial on how to build a navigation bar. I built my navigation bar off the tutorial. It’s a bit different. I just took the basic idea from the tutorial. Anyway, this is my problem, when the screen is smaller, the nav bar changes. You can click the nav bar. It opens up a vertical navigation bar (I call this a mini-menu). While the mini-menu is open, if you resize the browser and make it larger than 840 pixels, the old navigation bar is misplaced. You can see what I’m talking about at my site. http://JetBBS.com/test2.html. Do you have any ideas how I can fix this? I’ve tried just about everything I could think of! I think I need to do something in the jQuery code (http://JetBBS.com/js/click.js) but I’m not sure what. jQuery isn’t my strong suit. Thanks!

  160. Aeakanshi Agarwal

    I want to known the difference between media query and breakpoints,is there is any difference between both of them,
    if yes then please Reply…
    thank you.

  161. Al
    Permalink to comment#

    Any particular reason why screen is the target and not all as in

    @media all and (min-width: 768px) {}

  162. Håkan Olsson
    Permalink to comment#

    Sorry but can someone explain how and when this article is helpful.

    Example:

    The query in the iPhone 4 and 4S section (copy/pasted below) is going to effect a lot more devices than iPhone 4 and 4S.

    /* ———– iPhone 4 and 4S ———– /
    /
    Portrait and Landscape */
    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px)
    and (-webkit-min-device-pixel-ratio: 2) {}

    It’s going to effect for example:
    iPhone 5
    iPod Touch
    LG Optimus G
    Samsung Galaxy Note
    Samsung Galaxy Note 2
    Samsung Galaxy S5
    Samsung Galaxy S3
    Samsung Galaxy Nexus
    LG Nexus 4
    Microsoft Lumia 830
    Sony Xperia S
    ..and many many more devices. So what’s the use of spec this as “iPhone 4 and 4S”?

    Another thing. In the query — how do the (max-device-width: 480px) relate to iPhone 4 and 4S though the device-width for these two devices is 320px?

    • Spork Schivago
      Permalink to comment#

      I think what the developer was showing was the media queries for the various iPhone stuff. Yeah, it’d work with other devices, but it definitely works with the iPhone 4 and 4S. I do believe that’s why he’s grouped it under the iPhones section. They’re basically saying hey, this is the media query for iPhone 4 and 4S. Other phones that use the same resolution will be included as well, but if you’re looking for the code to support iPhone 4 and 4S, here ya go.

    • Unnie
      Permalink to comment#

      For iphone 4 and 4s the maximum device width is 480px which is for the landscape mode.

  163. Håkan Olsson
    Permalink to comment#

    For iphone 4 and 4s, device-width would probably be 480px in landscape mode — but only if these two devices were Android phones.

    Device-width works differently on IOS and Android. For Android it’s (usually/not allways) two (2) device-width. One for the short side in portrait orientation and the other for the long side in landscape mode.

    However, in IOS there is only one (1) device-width. It’s the shorter side, no matter what orientation. So actually, for the iphone 4 and 4s the device-width is 320px — even in landscape orientation.

    Another problem is that different browsers respond differently to device-width. Example: The Android default browser and Dolphin (but not Chrome, Opera, Firefox) use physical values not CSS pixels which is the norm.

    All this together means that using device-width for the page layout is not very far from using random numbers :|

  164. Wasim Khan
    Permalink to comment#

    Cool Stuff,

    What about the bigger screens, that exceeds 1244px like 1824px….

    Can we use

    @media screen
    and (min-device-width: 1800px)
    and (max-device-width: 2200px)
    and (-webkit-min-device-pixel-ratio: 1) {
    }

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```