我的响应式导航栏在移动设备上没有响应（溢出问题？）

Question

所以我正在尝试为网站构建一个响应式导航栏，在台式机上效果很好，但是在移动设备上，没有多少我在处理溢出：隐藏；实际上会使溢出消失。

当我最初开始研究这个问题时，我发现一些论坛说有时你需要分配“溢出：隐藏；”到 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">