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

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

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

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

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

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

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

当在 375px 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">

这是菜单的一些屏幕截图：在 iPhone X Chome 视图 (375px) 上：

375px 的常规 Chrome 浏览器视图：

这是现场网站的链接：https : //onesourcebenefits.com/

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

到目前为止，我已经阅读了本网站上的大量信息，并且正在继续研究这一点。任何帮助，将不胜感激。:)