我的iPhone 6获得了iPhone 5媒体查询 [英] My iPhone 6 gets the iPhone 5 media query
问题描述
我不知道这是怎么回事。
我在CSS媒体查询中专门针对iPhone 5:
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;
}
}
我在Iphone 6上打开网页
I open the web page on my Iphone 6 and for some reason this media query kicks in and that div is hidden.
当我在测试站点上检查设备的宽度时,例如: http://www.quirksmode.org/m/tests/widthtest_vpdevice.html
显示以下内容的宽度/高度: 320/568。
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?
谢谢
推荐答案
尝试使用宽高比代替绝对像素,如下所述。
Try using aspect ratio instead of absolute pixels as outlined below.
< a href = https://stackoverflow.com/a/12848217/4824030> https://stackoverflow.com/a/12848217/4824030
另一个有用的媒体功能是设备纵横比。
Another useful media feature is device-aspect-ratio.
请注意,iPhone 5的宽高比为16:9。它实际上是
40:71。
Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71.
iPhone< 5:@media屏幕和(device-aspect-ratio:2/3){}
iPhone < 5: @media screen and (device-aspect-ratio: 2/3) {}
iPhone 5:@media屏幕和(device-aspect-ratio:40 / 71){}
iPhone 5: @media screen and (device-aspect-ratio: 40/71) {}
iPhone 6:@media屏幕和(设备纵横比:667/375){}
iPhone 6: @media screen and (device-aspect-ratio: 667/375) {}
iPhone 6 Plus:@media屏幕和(device-aspect-ratio:16/9){}
iPhone 6 Plus: @media screen and (device-aspect-ratio: 16/9) {}
iPad:@media屏幕和(device-aspect -ratio:3/4){}
iPad: @media screen and (device-aspect-ratio: 3/4) {}
这篇关于我的iPhone 6获得了iPhone 5媒体查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!