html - CSS3 Media Queries for targeting landscape on both iphone 4 and iPhone 5 sized sceens -


i having issue css3 media queries developing mobile site. code below works great on iphone 5 landscape, not on iphone 4 , below in landscape mode.

/* normal css represents portrait */ .test {width:100%;}  /* flip landscape (working great on iphone 5) - not great on 4s , below */ @media screen , (orientation: landscape) {     .test {width: 50%} } 

now need keep above target iphone 4s , below in landscape mode, other devices around screen size.

can add media query target smaller screens keep styles above?

any great.

thanks

yeah, can target landscape on both using:

// iphone 5 @media screen , (orientation:landscape) {     .test { width: 50% } }  // iphone 4 , below, @danield's example @media screen  , (min-device-width : 320px)  , (max-device-width : 480px)  , (orientation : landscape) {      .test { width: 30% } } 

where first iphone 5, , second iphone 4 , below. although, think second 1 should work both in itself. can't confirm since don't own 5.

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


Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -