物化css响应导航栏不适用于移动设备

我有以下代码

<nav class="blue">
  <a href="#!" class="brand-logo center">Logo</a>
</nav>

我的代码中只有居中的徽标。然而，当我在移动设备上查看此代码时，导航栏的高度变得非常小。为什么响应类在这种情况下不起作用

请注意，我并不关心将navbar元素折叠到sidenav。现在，在移动设备上，导航栏本身看起来很小（高度），这让我觉得在某个地方缺少了一些响应性强的东西

作为我问题的一个例子，我附上这个。尝试通过水平调整大小以不同分辨率渲染，在较小的设备上，导航栏的高度将变短

编辑1：如果你看下面的屏幕截图，不仅导航栏没有响应，页面上的整个内容也没有响应。

这是materialize.css文件中的一条规则。它适用于601px或更高的宽度

nav {
    height: 56px;
}

这是默认值，为600px或更低。也许试试

nav {
    height: 64px;
}

---

保持一致？

我发现了问题所在。我的页面上缺少一个

元视口

标记

基本上，只需添加这一点就可以实现：

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

---

这允许现有媒体查询（由materializecss本身提供的查询）按预期正常工作。

通常将此元标记添加到您的

将解决此问题：

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

但我有一个问题，虽然我添加了这个元标记，但它似乎不遵守它。导航栏还是太宽了

原因是页面上有一个元素，它的宽度大于100%，虽然它有溢出：隐藏，但这个宽度仍然会弯曲页面宽度

---

我更改了该元素，一切正常。

请参阅我更新的问题。不仅导航栏没有响应，其他元素也没有作为响应元素渲染。

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