Media Queries - CSS only for iPhone landscape

Question

Are the same methods used to write CSS only for iPhone in landscape mode?

Solution 1

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
}

Solution 2

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.

Solution 3

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 {

    }
}

Solution 4

actually if you use :

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

then you prevent user to zoom at any time, which can cause usability problems.

I would recommand you to use :

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

In this case, you force your page to be displayed at it's original initial scale, and so then you can target different layout sizes with your media queries, as the layout will be resized when you will rotate your iPhone :

@media only screen and (min-width: 480px) {
    /* landscape mode */
}

@media only screen and (max-width: 479px) {
    /* portrait mode */
}

And the user can still pinch the page to zoom.

View more solutions