媒体查询不适用于手机，但响应能力适用于桌面答案

【问题标题】：Media queries Not working on phones, but responsiveness works on desktop媒体查询不适用于手机，但响应能力适用于桌面
【发布时间】：2019-05-06 07:38:56
【问题描述】：

我正在使用具体化 css 构建一个网站。
默认的移动导航菜单在移动设备上实现更长的条目。基本上，这些单词将换行到下一行，并与它下面显示 encrypt-o-jumble 的单词重叠。

我添加了通常格式如下的特定媒体查询。

@media screen and (max-width: 870px) {
  .xp-1 {
    min-height: 100px;
  }
}

我在 chrome 浏览器中测试了它们，它们的响应速度非常好。

当我在任何类型的手机上查看同一个网站，或者 chrome 浏览器手机查看时，媒体查询会激活，就好像它们在较小的屏幕上一样。平板电脑通常足够大，不会触发媒体查询。

例如：在桌面上的 375 像素处，一行将换行到下面的行。通过媒体查询，该元素将扩展，将下面的元素向下推，并为整个链接创建足够的空间。

在 375 像素的 iPhone x 上查看时，元素会展开，但文本会变小并留有空白。

我尝试添加一些不同的元标记：

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

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

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

以下是一些菜单截图： On the iPhone X Chome view (375px):

Regular Chrome browser view at 375px:

以下是直播网站的链接： https://onesourcebenefits.com/

如何使移动设备上的显示与浏览器中的显示相同？

到目前为止，我已经阅读了该网站上的大量信息，并将继续对此进行调查。任何帮助，将不胜感激。 :)

【问题讨论】：

上周我遇到了类似的问题，直到我发现我正在测试的三星 s8 的最大宽度为 2960 像素。 This may help.。这导致我使用最小宽度来定位它，并在 min-width = 更宽的尺寸上进行修改。
感谢您提供此信息，我正在调查。

标签： responsive-design media-queries responsive materialize meta-tags

【解决方案1】：

在这种情况下，materialize 在 li 标签内的嵌套标签上强制执行固定高度，如其移动导航菜单的示例所示。我删除了嵌套的 ul 和 li，并将它们替换为具有填充和悬停属性的 div。现在该网站可以响应了。

【讨论】：