1

我正在尝试在 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 来测试它，所以我不确定它是否在非视网膜屏幕上正确显示，以及是否存在问题。有什么建议么？谢谢。

4

1 回答 1

1

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

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

平板电脑 3

@media (max-device-width: 768px) and (orientation: portrait) {   
}

银河标签 10.1

@media (max-device-width: 800px) and (orientation: portrait) {   
}
于 2013-09-17T02:27:28.273 回答