媒体查询在 chrome 中不起作用，但在 iphone 上起作用

Posted 2023-03-06

【中文标题】媒体查询在 chrome 中不起作用，但在 iphone 上起作用

【英文标题】：media queries not working in chrome but works on iphone

【发布时间】：2013-04-11 12:41:22

【问题描述】：

我在样式表的底部添加了这个

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

body 
 background: #000 !important;

 

它在 iphone 上运行良好，但我想通过调整浏览器大小在 ff 或 chrome 中进行测试，它确实添加了样式。我怎样才能让它工作？

【问题讨论】：

您可以在css-tricks.com/snippets/css/media-queries-for-standard-devices上阅读有关媒体查询的更多信息

【参考方案1】：

删除-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 测量永远不会改变的设备（即您的显示器）的宽度

【讨论】：

效果很好。谢谢。但是 -device 有什么作用呢？我是否有风险通过删除在手持设备上破坏它？编辑：你刚刚回答了我的问题

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