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

Answer 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; 
    }
}

Answer 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) {

}

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

Answer 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 */
}

Answer 5

i tried this by using Om's solution in a diff. way it worked for me, hope it helps someone

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