媒体查询无法在Chrome中工作，但工作在iphone

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

body { 
background: #000 !important; 

} 

}

它适用于iphone正常，但我想通过调整浏览器在FF或Chrome测试和它添加样式。我怎样才能使它工作？

2013-04-18 LeBlaireau

您可以在http://css-tricks.com/snippets/css/media-queries-for-standard-设备/ –

取出-device

@media only screen 
and (min-width : 320px) 
and (max-width : 480px) { 

body { 
background: #000 !important; 

} 

}

min-width max-width措施，您的浏览器窗口的宽度。 min-device-width max-device-width测量设备的宽度（即您的显示器），它永远不会改变

2013-04-18 12:00:27 Turnip

+1进行解释。 –

工作正常。谢谢。但是 - 设备做什么？我是否有可能通过移除手持设备来解决此问题？编辑：你刚刚回答我的问题 – LeBlaireau

正如我所提到的， - 设备测量您正在使用的设备（手机，显示器，笔记本电脑屏幕等），而不是浏览器窗口的尺寸。在移动设备上，浏览器窗口的宽度几乎可以与设备宽度相同，因此两个查询都应该捕获同一设备。 IE浏览器。它应该工作得很好，没有装置。 – Turnip

回答