Question

我目前正致力于使我的投资组合网站具有响应能力。我的媒体查询似乎是在桌面上工作，但只要我在移动设备（iPhone 4）上查看它就会出现问题。

以下是我iPhone 4上显示效果的图片

出于某种原因，即使媒体查询background应该覆盖设备，width似乎也被切断了，我的手机nav也没有加载.I＆＃39已经看了几个小时，似乎仍然无法找到问题。

以下是相关代码：

HTML

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

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

以下是我如何使用CSS调用查询

CSS

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

}

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

Here是实际网站，因此您可以看到桌面版和移动版之间的差异

Answer 1

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

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

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

所以，

或

使用非移动方法，该方法仅使用 max-width

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

Answer 2

尝试将此添加到标题中。

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

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

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

#car{
width: 100%;
}

同样，你会看到差异，你需要调整字体大小等等。我猜你刚刚开始进行网络开发？