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

【问题标题】：Responsive navbar working on the computer but not on the phone响应式导航栏在电脑上工作但在手机上不工作
【发布时间】：2020-04-22 18:48:12
【问题描述】：

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

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

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

任何帮助将不胜感激。

谢谢你伊森

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：