html - 我的响应式导航栏在移动设备上没有响应(溢出问题？)

Question

所以我正在尝试为网站构建一个响应式导航栏，在桌面上效果很好，但是在移动设备上，我没有多少时间使用 overflow: hidden;实际上会使溢出消失。

当我最初开始研究这个问题时，我发现有几个论坛说有时您需要分配“溢出:隐藏；”到 html 的更具体部分，所以我尝试了，但无济于事。我的溢出仍然在移动设备上公开。

.mobile{
      display: none;
      cursor: pointer;
      overflow-x: hidden
  }

  .mobile div{
    width: 25px;
    height: 2px;
    background-color: #2d3436;
    margin: 5px;
    transition: all 0.3s ease;
  }

  @media screen and(max-width:1024px){
      .main-nav{
          width: 60%;
      }
  }

  @media screen and (max-width:786px){
      body{
          overflow: hidden;
      }
      .main-nav{
          position: absolute;
          right: 0px;
          height: 92vh;
          top: 8vh; 
          background-color: white;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          transform: translateX(100%);
          transition: transform 0.5s ease-in;
        }
        .main-nav li {
            opacity: 0;
        }
        .mobile{
            display: block;
        }
    }

据我所知(当然不多)这应该是一个在移动设备上没有溢出的响应式导航栏，我也有一个指向测试网站的链接，如果你想看到它的实际效果。我可能只是遗漏了一些小东西，但我很沮丧，我已经研究了好几个小时了。感谢您的帮助!

Answer 1

尝试将其添加到 HTML 的 head 标记中

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">