CODEWITHSUNDEEP
cssiphonemedia-queries
Dee
Dee

Reputation: 3255

Media Queries - CSS only for iPhone landscape

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

Upvotes: 16

Views: 49130

Answers (4)

Mattia Astorino
Mattia Astorino

Reputation: 1576

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.

Upvotes: 30

Nicolas Lagarde
Nicolas Lagarde

Reputation: 267

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.

Upvotes: 1

Jason Gennaro
Jason Gennaro

Reputation: 34855

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
}

Upvotes: 15

ajsharma
ajsharma

Reputation: 1188

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 {

    }
}

Upvotes: 6

Related Questions