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

Question

我正在使用 materialize css.
构建一个站点移动设备上 Materialize 上的默认移动导航菜单会中断较长的条目。基本上，单词将换行到下一行并与它下面的单词重叠，显示 encrypt-o-jumble。

我去添加了一般格式如下的特定媒体查询。

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

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

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

例如：在桌面上的 375px 处，一行将换行到下一行。通过媒体查询，该元素将展开，将下方的元素向下推，并为整个 link 创建足够的 space。

在 375px iPhone x 上查看时，元素会展开，但文本会变小并留空 space。

我尝试添加了几个不同的元标记：

<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:

这是一个 link 到实时站点： https://onesourcebenefits.com/

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

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

Answer 1

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

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

Media queries Not working on phones, but responsiveness works on desktop

responsive-design

media-queries

responsive

materialize

meta-tags