为什么我的媒体查询没有在iPhone上触发？

Question

I am trying to get a media query to activate on iPhone screens, but it isn't triggering on my iPhone 5. My CSS is:

 @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%; } 
}

This should trigger on an iPhone 5, shouldn't it? Since the iPhone's width is 320 virtual pixels, correct? In the related questions I've looked at, people often suggest including

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">

but I already have that in place. I only have an iPhone 5 to test this on, so I'm not sure if it displays correctly on a non-retina screen, and if therein lies the problem. Any suggestions? Thanks.

Answer 1

iPhone5

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

Blackberry Torch

@media screen and (max-device-width: 480px) {   
}  

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

iPad Mini

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