我的媒体查询在我的iphone上工作，但在浏览器调整大小时没有

Question

当我在iphone上查看我的网站时，它看起来都像我计划的那样，但是当我调整浏览器大小以更快地检查css更改时，我无法看到媒体查询对其产生任何影响。

我的CSS的响应式设计部分开始于：

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

/*style*/

}

然后我在head标签中有以下内容以及链接样式表

<meta name="viewport" content="width=device-width, user-scalable=no">

任何人都可以帮助我吗？谢谢 - www.joewinfield.net/portfolio

Answer 1

在媒体查询中使用min-width而不是min-device-width。当然max-device-width也是如此。

min-device-width指的是显示器的分辨率（例如，1024 x 1024），而min-width指的是浏览器本身的宽度。

使用min-width代替min-device-width通常是一种更好的方法。