CODEWITHSUNDEEP
androidcssiphonemedia-queries
Aaron Russell
Aaron Russell

Reputation: 75

Media query only been matched by certain phones

This media query is only been picked up by the iPhone 6 Plus but not any other iPhone or Android phone.

@media screen and (device-aspect-ratio: 16/9) and (max-width:768px), 
screen and (device-aspect-ratio: 16/10) and (max-width:768px){
    .content{
         margin-top:200vh
    }
}

Any ideas?

Thanks,

Aaron

Upvotes: 0

Views: 45

Answers (2)

Jamie Paterson
Jamie Paterson

Reputation: 446

Its probably the aspect ratio. If another screen has the same width but differing aspect (ie, height) then it will not match and will then not render for this device. Try not to be too specific in your @media queries - targeting exacting devices will leave you a lot of work, try and make the layouts flow across devices it does not need exact pixel positioning across every device. Besides next month a whole new wave of devices will hit the market and negate all that hard work.

Upvotes: 0

Tom Maton
Tom Maton

Reputation: 1594

Wouldn't orientation be better used than device-aspect-ratio eg. 

@media screen and (orientation: landscape) and (max-width:768px){
    .content{
         margin-top:200vh
    }
}

Plus device-aspect-ratio will become deprecated and replaced with aspect-ratio http://dev.w3.org/csswg/mediaqueries-4/

Upvotes: 1

Related Questions