3 media queries for iphone portrait, landscape and ipad portrait

Question

I have tried the different combinations of width & device-width but on the iPhone in landscape this code never turns the background red;

I am having problem when I have more than 1 media query. See this JSfiddle example the div background is never green unless you remove the last media query

This is what I would like 3 different media queries which target:

1. both smartphones and tablets(portrait only). This will be where I have all my generic styles for responsive layout
2. width: 320px - 479px - this will apply to small screens, such as iphone in portrait only
3. width: 480px - 640px - this will apply to larger screens such as iphone in landscape and ipad in portrait. Not ipad in landscape.

Note this is for a HTML email so its not possible to use JS.

@media only screen and (max-width: 640px) {
    body { padding: 10px !important }
}
/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
    body { background: blue !important }
}
/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (max-device-width: 640px) {
    body { 
       background: red !important 
       -webkit-text-size-adjust:none; 
    }
}

Reference: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Solution 1

Your own attempt modified

@media only screen and (max-width: 640px) and (orientation: portrait) {
    body { padding: 10px !important }
}

/* Small screen */
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) and (orientation: portrait) {
    body { background: blue !important }
}

/* iPhone landscape and iPad portrait */
@media only screen and (max-device-width: 480px) and (orientation: landscape),
@media only screen and (max-device-width: 640px) and (orientation: portrait)  {
    body { 
       background: red !important 
       -webkit-text-size-adjust:none; 
    }
}

Solution 2

Media queries also support device orientation. You should try that

@media screen and (orientation:portrait) {
    /* Portrait styles */
}

@media screen and (orientation:landscape) {
    /* Landscape styles */
}

You can also combine them with width like so

@media screen and (max-device-width : 320px) and (orientation:portrait) {

}

Solution 3

Responsive emails can be tough because there are so many e-mail clients out there, and support can be limited for media queries. You may just want to look into making your divs fluid with percentages, so they scale, rather than media queries. The people at zurb have some great templates which may help out too. http://www.zurb.com/playground/responsive-email-templates

Hope that helps.

Solution 4

Take a look at this resource, will give you media queries for pretty much everything http://arcsec.ca/media-query-builder/ , you need to be be specifying a min width aswell. also less of the !important, dirty :)

in your case

@media only all and (min-device-width: 320px) and (max-device-width: 480px) {
/* insert styles here */
}

View more solutions