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

Question

我目前正在努力使我的投资组合网站具有响应能力。我的媒体查询似乎可以在桌面上运行，但一旦我在移动设备 (iPhone 4) 上查看它，事情就会变得一团糟。

这是它在我的 iPhone 4 上的样子的图片

由于某些原因，即使媒体查询 width 应该覆盖设备，background 似乎也被切断了，而且我的手机 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

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

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

我建议你，不要在同一个媒体查询中使用min-width和max-width，这会让你编写更多代码。

所以，要么

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

或

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

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