响应式导航条在电脑上能用，但在手机上不能用。

Question

我的客户在codepen上发现了这个漂亮的响应式导航条，想在他们的网站上使用。我决定下载它并把它放在一个网站上进行测试。测试页在自己的域名上。

在跳转之前，我下载了文件，并在自己的域名上测试，出现了一些问题。它在电脑上工作得非常好。当窗口被拉伸到全屏时，它被设置为一个水平菜单，当我缩小屏幕时，它变成了一个下拉菜单.然而当它在实际的手机上查看时，菜单仍然显示为一个水平菜单。

我试着修改CSS文档，但没有结果。我甚至尝试改变@media(max-width: 768px)，认为它可能需要一个更高的数字。我在Javascript代码中找不到任何可能出错的地方。你们有谁知道为什么它可能无法工作。

任何帮助将被感激。

谢谢你，Ethan

Answer 1

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

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

手机一般都会把正常电脑宽度的页面放到手机屏幕上所以必须让他们按照实际比例来显示网站！