javascript - 响应式导航栏在电脑上工作但在手机上不工作

所以我的客户在 codepen 上发现了这个漂亮的响应式导航栏，并希望在他们的网站上使用它。我决定通过下载它并将其放在自己域的测试页面上来进行测试。

在继续之前，我下载了该文件并在我自己的域上对其进行了测试，但出现了一些问题。它在计算机上运行得非常好。当窗口被拉伸到全屏时，它被设置为水平菜单，当我缩小屏幕时，它变成了一个下拉菜单。但是，当在实际手机上查看时，菜单仍然显示为水平菜单。

我试过弄乱 CSS 文档，但没有运气。我什至尝试更改 @media (max-width: 768px) 认为它可能需要更高的数字。我在 Javascript 代码中找不到任何可能出错的内容。你们有谁知道为什么它可能不起作用。

任何帮助，将不胜感激。

谢谢你，伊桑

标签： javascripthtmlcssnavbarresponsive

这听起来像是一个视口问题。在<head>您的 HTML 页面中，尝试添加以下代码：

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

手机通常会尝试将正常计算机宽度的页面放在手机屏幕上，因此必须告诉他们以实际比例显示网站！