CODEWITHSUNDEEP
htmliosiphonecss
Light
Light

Reputation: 1677

My iPhone 6 gets the iPhone 5 media query

I can't figure out what is going on here. I have in my CSS media query specially for iphone 5:

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
    #some-div {
        display: none;
    }
}

I open the web page on my Iphone 6 and for some reason this media query kicks in and that div is hidden.

When I check my device's width on test site like: http://www.quirksmode.org/m/tests/widthtest_vpdevice.html It shows width/height of: 320/568.

What is the problem here and how it can be solved?

Thanks

Upvotes: 0

Views: 709

Answers (1)

Marisa
Marisa

Reputation: 792

Try using aspect ratio instead of absolute pixels as outlined below.

https://stackoverflow.com/a/12848217/4824030

Another useful media feature is device-aspect-ratio.

Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71.

iPhone < 5: @media screen and (device-aspect-ratio: 2/3) {}

iPhone 5: @media screen and (device-aspect-ratio: 40/71) {}

iPhone 6: @media screen and (device-aspect-ratio: 667/375) {}

iPhone 6 Plus: @media screen and (device-aspect-ratio: 16/9) {}

iPad: @media screen and (device-aspect-ratio: 3/4) {}

Upvotes: 2

Related Questions