ios - Media queries not working for iPhone series -


i wrote media queries iphone 4/4s, iphone 5/5s, iphone 6 , iphone 6plus. here code:

/*for iphone 4/4s*/ @media screen , (min-device-width : 320px) , (max-device-width : 480px) , (orientation: portrait){ /*my styles here */ } @media screen , (min-device-width : 320px) , (max-device-width : 480px) , (orientation: landscape){ /*my styles here */ }    /*for iphone 6*/ @media screen , (min-device-width : 375px) , (max-device-width : 667px) , (orientation : portrait) {  /*my styles here */ } @media screen , (min-device-width : 375px) , (max-device-width : 667px) , (orientation : landscape) {  /*my styles here */ }  /*for iphone 6plus*/ @media screen , (min-device-width : 414px) , (max-device-width :  736px) , (orientation : portrait) { /*my styles here */ } @media screen , (min-device-width : 414px) , (max-device-width : 736px) , (orientation : landscape) { /*my styles here */ }   

for portrait mode, each device's portrait css gets applied successfully. landscape mode of devices, landscape media query of iphone 6plus getting applied.
how can fix it?

if wanted apply set of styles if viewing device either had minimum width of 700px or handheld in landscape, write following:

@media (min-width: 700px), handheld , (orientation: landscape) { ... } 

above, if on screen device viewport width of 800px, media statement return true because first part, interpreted @media , (min-width: 700px) apply device , therefore return true, despite fact screen device fail handheld media type check in second media query. likewise, if on handheld device held in landscape viewport width of 500px, while first media query fail due viewport width, second media query succeed , media statement return true.

comma-separated lists

comma-separated lists behave logical operator or when used in media queries. when using comma-separated list of media queries, if of media queries returns true, styles or style sheets applied. each media query in comma-separated list treated individual query, , operator applied 1 media query not affect others. means comma-separated media queries can target different media features, types, , states.

reference


Comments

Popular posts from this blog

How has firefox/gecko HTML+CSS rendering changed in version 38? -

javascript - Complex json ng-repeat -

jquery - Cloning of rows and columns from the old table into the new with colSpan and rowSpan -