trying to get my iphones to use the proper queries but i can’t figure out why the iphone4 landscape media query is not being read and is instead reading the iphone5 landscape media query. any help would be greatly appreciated. below is the code i am using:
/* phone-portrait */
@import url(“phone-portrait.css”) only screen
and (min-width:320px )
and (max-width: 568px )
and ( orientation: portrait );
/* phone4 -landscape*/
@import url(‘phone-landscapeFour.css’) only screen
and (min-width:320px )
and (max-width: 480px)
and (orientation: landscape );
/* phone5 -landscape*/
@import url(‘phone-landscapeFive.css’) only screen
and (min-width:320px )
and (max-width: 568px)
and (orientation: landscape );
/* ———- Tablets ———- */
@import url(“tablet.css”) only screen
and (min-width: 569px )
and (max-width: 1024px)
and (orientation: portrait);
@import url(‘tablet-landscape.css’) only screen
and (min-width: 569px)
and (max-width: 1024px)
and (orientation: landscape);
/* desktop */
@import url(“desktop.css”) only screen
and (min-width: 1025px);
/* hi-res */
@import url(“hi-res.css”) only screen
and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2);
