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

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

}