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) {}
Comments
Post a Comment