CODEWITHSUNDEEP
htmlcssmedia-queries
John
John

Reputation: 1797

CSS3 Media Queries for targeting landscape on both iPhone 4 and iPhone 5 sized screens

I am having an issue with CSS3 media queries developing a mobile site. The code below works great on iPhone 5 landscape, but not so good on iPhone 4 and below in landscape mode.

/* Normal css represents portrait */
.test {width:100%;}

/* Flip to landscape (working great on iPhone 5) - not so great on 4s and below */
@media screen and (orientation: landscape) {
    .test {width: 50%}
}

Now I need to keep the above but also target ONLY iPhone 4s and below in LANDSCAPE mode, as well as all other devices around that screen size.

Can I add another media query to target the smaller screens but also keep the styles above?

Upvotes: 0

Views: 511

Answers (2)

Nicklas Nygren
Nicklas Nygren

Reputation: 2605

Yeah, you can target landscape on both using:

// Iphone 5
@media screen and (orientation:landscape) {
    .test { width: 50% }
}

// Iphone 4 and below, from @Danield's example
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { 
    .test { width: 30% }
}

Where the first is for iPhone 5, and the second is for iPhone 4 and below. Although, I think the second one should work for both in itself. But I can't confirm it since I don't own a 5.

http://www.w3.org/TR/css3-mediaqueries/#orientation

Upvotes: 2

Danield
Danield

Reputation: 125443

According to this site:

iPhone 2G-4S in landscape

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { /* STYLES GO HERE */}

Upvotes: 0

Related Questions