媒体查询适用于桌面浏览器，但不适用于移动设备

Question

我目前正在努力使我的投资组合网站具有响应性。我的媒体查询似乎可以在桌面上运行，但是当我在移动设备（iPhone 4）上查看它时，事情就变得不正常了。

这是它在我的 iPhone 4 上的显示图片

由于某种原因，background 似乎被切断了，即使媒体查询 width 应该覆盖设备，而且我的手机 nav 还没有加载。我已经研究了几个小时并且似乎仍然找不到问题。

以下是相关代码：

HTML

<meta name="viewport" content="width=device-width" />

（我也尝试在此设置初始比例，但这只会让事情变得更糟）

这是我使用 CSS 调用查询的方式

CSS

@media only screen and (min-width:400px) and (max-width:499px) { 

}

我也有其他断点，但这是最小的一个

Here 是实时网站，因此您可以看到桌面版和移动版之间的区别

Answer 1

因为您在last media-query 上设置了min-width:400px，这意味着400px 下的任何设备都将拥有您设置的常规CSS，

解决方案：删除min-width:400px 或创建另一个media query。

我建议你，不要在同一个media query 中使用min-width 和max-width，这会让你写更多的代码。

所以，要么

• 使用移动方法，即仅 min-width

或

• 使用非移动方式，即仅使用 max-width

使用这些选项，您的查询将比您现在使用的第一个选项包含更少的代码。

Answer 2

尝试将此添加到您的标题中。

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

而不是您添加的视口。如果这不起作用，您的元素之一必须占用比屏幕尺寸本身更多的空间（看看您是否可以向左或向右滚动）。

10 分钟后编辑 我刚刚检查过，这就是问题， 尝试添加

#car{
width: 100%;
}

您也会看到不同之处，您需要调整字体大小等等。我猜你才刚刚开始网络开发？