如何在不超过 100vw 的情况下使响应式导航栏汉堡包图标正常工作？

Question

你好，我正在做我的项目，真的很想制作一个响应式导航栏，右侧有汉堡包图标。为了实现这一目标，我正在关注 youtube 上的制作教程。

一切都非常顺利，直到我在我的移动设备上测试了它在线部署后的代码。我真的有问题。 Please check the demo of this project here and link of actual site : http://navbar-collfm.s3-website-us-east-1.amazonaws.com/（尝试在移动设备视图中查看）

如果我双击屏幕，它就会缩小，一切看起来都很奇怪，高度延伸超过 100vh，宽度也一样。

我应该对以下代码进行哪些更改才能使其正常工作？

Index.html

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>
    <body>
        <nav>
            <div class="logo">
                <h3>College Facemash</h3>
            </div>
                <ul class="nav-links">
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Login / Signup</a></li>
                </ul>
           <div class="burger">
               <div class="line1"></div>
               <div class="line2"></div>
               <div class="line3"></div>
           </div>
        </nav>

        <script>
const navslide = () =>{
    const burger = document.querySelector('.burger')
    const nav = document.querySelector('.nav-links')
    const navLinks = document.querySelectorAll('.nav-links li')
    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active')

        navLinks.forEach((link, index) => {
            if(link.style.animation){

                link.style.animation = '';
            }else{
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;

            }
        });

        burger.classList.toggle('toggle')

    })


}

navslide();
</script>

    </body>
    </html>

和Style.css

 @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
nav{
    display:flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    font-family: 'Poppins', sans-serif;
    background-color:#512da8;

}

.logo{
    color:white;
    font-size: 1.5rem;
}
.nav-links{
    display:flex;
    justify-content:space-around;
    width: 35%;
}
.nav-links li{
    list-style: none;
}
.nav-links a{
    text-decoration: none;
    color: white;
    font-weight:bold;
    font-size: 1rem;
}
.burger{
    display:none
}
.burger div{
    width:25px;
    height: 2px;
    margin:5px;
    background-color: white;
    transition: all 0.3s ease;
}

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

@media screen and (max-width: 640px){

    body{
        overflow-x: hidden;

    }

    .nav-links{

        position:absolute;
        right: 0px;
        height: 92vh;
        top:8vh;
        background-color: #512da8;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-out;

    }

    .nav-links li{
       opacity: 0;
    }
    .burger{
        display: block;
        cursor: pointer;
    }

    .nav-active{
        transform: translateX(0%);
    }

    @keyframes navLinkFade {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to{
            opacity: 1;
            transform: translateX(0px);
        }

    }

    .toggle .line1{
        transform: rotate(-45deg) translate(-5px,5px);


    }
    .toggle .line2{
        opacity: 0
    }
    .toggle .line3{
        transform: rotate(45deg) translate(-5px,-5px);

    }

}

Answer 1

使用 viewport 的 <meta /> 标签来控制它。要禁止在页面上进行任何缩放，请将最小和最大比例以及 user-scalable=no 和 target-densityDpi=device-dpi 分别设置为 1.00（以避免浏览器在视网膜显示器等高密度屏幕上出现错误行为）。用以下内容替换您的元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />

注意：虽然此功能在移动平台上得到广泛支持，但限制 minimum/maximum 边界不能简单地保证在每个平台上都有效。

您还可以根据css设备适配的工作草案查看viewport CSS descriptor which support min-zoom and max-zoom。同样，与前一种方法相比，这种方法的可靠性应该较低。

如何在不超过 100vw 的情况下使响应式导航栏汉堡包图标正常工作？

How to make responsive navbar hamburger icon work properly without extending with more than 100vw?

html

css

overflow

navbar

hamburger-menu