Media Queries - CSS only for iPhone landscape

Yes, sure. Check: http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

If you want to target iphone only you have to add the resolution or the dppx density to these MQ.


If I understand you correctly, and you want to know the media queries to target a smartphone like the iPhone only when it is held horizontally, try something like this:

@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* styles go here */
    body {

    }
}

You could do this

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

That forces the iPhone to render viewport the same as the device width.

Then use this css to target the landscape mode, which is +320px wide

@media screen and (min-width: 321px){
    //styles
}