响应式导航栏在计算机上工作但不在 phone
Responsive navbar working on the computer but not on the phone
所以我的客户在 codepen 上发现了这个漂亮的响应式导航栏，并想在他们的网站上使用它。我决定下载它并将其放在自己域的 test page 上进行测试。
在继续之前，我下载了文件并在我自己的域上对其进行了测试，但出现了一些问题。它在电脑上运行得非常好。当 window 被拉伸到全屏时，它被设置为水平菜单，当我缩小屏幕时它变成了一个下拉菜单。
然而，当它在实际 phone 上查看时，菜单仍然显示为水平菜单。
我试过弄乱 CSS 文档，但没有成功。我什至尝试更改 @media (max-width: 768px)，认为它可能需要更大的数字。我在 Javascript 代码中找不到任何可能出错的地方。你们中有人知道为什么它可能不起作用吗？
如有任何帮助，我们将不胜感激。
谢谢
伊桑
这听起来像是视口问题。在 HTML 页面的 <head> 中，尝试添加以下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
手机通常会尝试让正常的计算机宽度页面适合 phone 屏幕，因此必须告知它们以实际比例显示网站！
所以我的客户在 codepen 上发现了这个漂亮的响应式导航栏，并想在他们的网站上使用它。我决定下载它并将其放在自己域的 test page 上进行测试。
在继续之前，我下载了文件并在我自己的域上对其进行了测试，但出现了一些问题。它在电脑上运行得非常好。当 window 被拉伸到全屏时，它被设置为水平菜单，当我缩小屏幕时它变成了一个下拉菜单。
然而，当它在实际 phone 上查看时，菜单仍然显示为水平菜单。
我试过弄乱 CSS 文档，但没有成功。我什至尝试更改 @media (max-width: 768px)，认为它可能需要更大的数字。我在 Javascript 代码中找不到任何可能出错的地方。你们中有人知道为什么它可能不起作用吗？
如有任何帮助，我们将不胜感激。
谢谢 伊桑
这听起来像是视口问题。在 HTML 页面的 <head> 中，尝试添加以下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
手机通常会尝试让正常的计算机宽度页面适合 phone 屏幕，因此必须告知它们以实际比例显示网站！