移动导航的问题 - 编程之家

如何解决移动导航的问题

我正在尝试将桌面导航隐藏在移动设备上，但由于某种原因它不会隐藏，直到我将最大宽度增加到 1000px+，这不应该发生，因为我测试过的所有手机都是只有 400-500px 宽。我只能假设它是我的代码中的其他原因导致的，但不确定要更改什么来修复它。

body {
    margin: 0;
}

ul {
    list-style: none;
}

.rnav {
    background-color: rgb(40,40,44);
    height: 60px;
}

.darkbg {
    background-color: rgb(55,55,59);
}

a {
    text-decoration: none;
}

.navbtn:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #FFF;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out;
}
.navbtn:hover:before {
    visibility: visible;
    transform: scaleX(1);
}

.logo {
    width: 250px;
    max-width: 300px;
    margin-left: 20px;
    transition: all ease .3s;
}

.locn {
    height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    float: left;
}

.logo:hover {
    transform: scale(1.05);
}

.logreg {
    margin-right: 10px;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.logbtn {
    background-color: rgb(8,98,182);
    color: #fff;
    padding: 10px 22px;
    border: none;
    border-radius: 5px;
    Box-shadow: 0 4px 0 0 rgb(3,66,124);
    transition: all .3s;
    cursor: pointer;
}

.regbtn {
    background-color: rgb(14,138,209);
    color: #fff;
    padding: 10px 24px;
    margin-left: 10px;
    border: none;
    border-radius: 5px;
    Box-shadow: 0 4px 0 0 rgb(6,96,148);
    transition: all .3s;
    cursor: pointer;
}

.logbtn:focus,.regbtn:focus {
    outline: none;
}

.logbtn:active,.regbtn:active {
    Box-shadow: none;
    transform: translateY(3px);
}

.navlist {
    float: left;
}

.mnav {
    display: block;
    position: absolute;
    right: 25px;
    top: 10px;
    z-index: 100;
}

@media screen and (min-width: 800px) {
    .mnav {
        display: none;
    }
}

@media screen and (max-width: 800px) {
    .rnav #myLinks {
        display: none;
      }
    .logreg {
        display: none;
    }
}

<html>
    <head>
        

<link href="css/style.css" rel="stylesheet">
<link href="css/icon.css" rel="stylesheet">
<link href="https://kit-pro.fontawesome.com/releases/latest/css/pro.min.css" media="all" rel="stylesheet">

    </head>

<body class="darkbg">

<nav class="rnav">
      
<a href="#" class="locn">
    <img src="https://cdn.discordapp.com/attachments/833803478618996756/834522746548387888/Rocrates_logo.png" class="logo">
</a>

<ul class="navlist" id="myLinks">
    <li class="navbtn2">
        <a>Crates</a>
    </li>
    <li class="navbtn">
        <a>Coinflip</a>
    </li>
</ul>

<div class="logreg">
<button class="logbtn"><i class="fas fa-user-friends"></i> Login</button>

<a href="/register">
    <button class="regbtn"><i class="fas fa-user-plus"></i> Register</button>
</a>
</div>

<div id="nav-icon3" class="mnav">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>

    </nav>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

解决方法

将这行代码添加到文档的头部：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />

您的浏览器实际上是在创建一个较小的“缩小”页面图像，而不是实际调整其大小。见here。