CODEWITHSUNDEEP
cssmedia-queries
Gerry Mckay
Gerry Mckay

Reputation: 847

Media query not working with Landscape orientation

For my CSS media queries I've set it up mobile first which deals with all the overall styling.

I then have:

@media only screen and (min-width : 790px) {
}

@media only screen and (min-width : 990px) {
}

and I've added in 

@media screen and (orientation: landscape) and (max-width: 520px) {
}

which deals with the CSS changes when the smart phone is turned round to landscape mode, but it doesn't seem to work, am I writing the landscape media query wrong?

Upvotes: 1

Views: 4082

Answers (2)

Olga Gnatenko
Olga Gnatenko

Reputation: 790

Had a similar issue: my iPod/iPhone devices were detected as portrait orientation even when rotated.

I managed to resolve that with the following media query:

@media screen and (min-aspect-ratio: 4/3) 
{*your styles here*}

If you want to target any case when width is greater than height, I think something like (min-aspect-ratio: 101/100) or something like this might work. However, for current devices 4/3 is sufficient, I think.

Upvotes: 2

Scott Lawton
Scott Lawton

Reputation: 596

If you need aspect ratio for landscape, I think min-aspect-ratio: 1 suffices ... and therefore max-aspect-ratio: 1 for portrait.

But, even when the CSS is correct, there's an additional step required for a Cordova / PhoneGap app: Why doesn't my Cordova/PhoneGap iOS app rotate when the device rotates?

I found this StackOverflow item before that one, so perhaps others will also find a cross-link useful.

Upvotes: 0

Related Questions