html - My iPhone 6 gets the iPhone 5 media query -

i can't figure out going on here. have in css media query specially iphone 5:

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

i open web page on iphone 6 , reason media query kicks in , div hidden.

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

what problem here , how can solved?

thanks

try using aspect ratio instead of absolute pixels outlined below.

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

another useful media feature device-aspect-ratio.

note iphone 5 not have 16:9 aspect ratio. in fact 40:71.

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

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

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

iphone 6 plus: @media screen , (device-aspect-ratio: 16/9) {}

ipad: @media screen , (device-aspect-ratio: 3/4) {}