CODEWITHSUNDEEP
iphonehtmlcssresponsive-designmedia-queries
Sven
Sven

Reputation: 13275

Media Queries: Targeting orientation: landscape without excluding desktop computers

I am building a responsive page at the moment but I have a problem.
For larger screen sizes I want to enlarge stuff like headings. This works, but testing the page on my iPhone in landscape mode, the headings are too big.

Why the iPhone in portrait triggers a media query for larger screens? Well, the CSS rule that enlarges the headings is enclosed in this media query:

@media only screen and (min-width: 30em) {
    /* 480 pixel */
}

and the iPhone screen in landscape is 480px wide. So I tried to do it like this:

@media only screen and (min-width: 30em) not (orientation: landscape) {
        /* 480 pixel* /
}

Now it works on my iPhone, but the headings aren't enlarged anymore on my MacBook. Probably it's just some kind of logical error, but where am I going wrong?

Upvotes: 2

Views: 5085

Answers (1)

Jules
Jules

Reputation: 14510

Try replacing not (orientation:landscape) with and (orientation:portrait). That failing, try changing the em values to px values. Some browsers don't play nice with em yet, so it's worth a shot.

EDIT: Why not just break it up into separate styles?

@media all and (min-width:480px) and (orientation:landscape) {
    // styles for desktops, mouse-friendly interface
}

@media all and (min-width:480px) and (orientation:portrait) {
    // styles for mobiles, touch-friendly interface
}

Upvotes: 3

Related Questions