[英]Why does my media query not trigger on iPhone?
我正在尝试让媒体查询在iPhone屏幕上激活,但是它并没有在iPhone 5上触发。我的CSS是:
@media only screen and (max-width: 550px) {
.left-col-bio { width: 100%; }
.sidebar-bio { width: 100%; }
.left-col-lab { width: 100%; }
.sidebar-lab { width: 100%; }
}
这应该在iPhone 5上触发,不是吗? 由于iPhone的宽度为320个虚拟像素,对吗? 在我研究过的相关问题中,人们经常建议包括
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
但我已经准备好了。 我只有一部iPhone 5可以进行测试,所以我不确定它是否可以在非视网膜屏幕上正确显示,以及是否存在问题。 有什么建议么? 谢谢。
iphone 5
@media screen and (device-aspect-ratio: 40/71) {
}
or
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
}
黑莓火炬
@media screen and (max-device-width: 480px) {
}
三星S3
@media only screen and (-webkit-device-pixel-ratio: 2) {
}
Google Nexus 7
@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {
}
小型平板电脑
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
}
iPad 3
@media (max-device-width: 768px) and (orientation: portrait) {
}
Galaxy Tab 10.1
@media (max-device-width: 800px) and (orientation: portrait) {
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.