0

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

Light
  • 1,647
  • 3
  • 22
  • 39

1 Answers1

2

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) {}

Community
  • 1
  • 1
Marisa
  • 732
  • 6
  • 22
  • Tried it now, it doesn't work, still get's the iphone 5 media query. Actually, this iphone has the exact screen resolution of iphone 5, although it is iphone 6. Really weird. I don't know how to design my css with no way to test it on iphone 6 resolution. – Light Jun 04 '15 at 11:41
  • Then you don't have an iPhone 6. The iPhone 6 resolution is completely different from the iPhone 5. http://www.phonearena.com/phones/compare/Apple-iPhone-6,Apple-iPhone-5/phones/8346,7378 However, check to see if you have DisplayZoom enabled. http://stackoverflow.com/a/25757310/4824030 – Marisa Jun 04 '15 at 14:54