媒体查询无法在Chrome的响应模式下工作

Question

Code I made is not working properly it's working in DW but not in Chrome . 我编写的代码无法在DW中正常工作，但不能在Chrome中工作。 In Chrome I have to resize the screen then it change but when I open it in responsive mode it shows zoomed out version. 在Chrome浏览器中，我必须先调整屏幕大小，然后更改它，但是当我以响应模式打开它时，它会显示缩小的版本。 Here's the code 这是代码

<!DOCTYPE><html>
<head>
    <meta content="width=device-width,initial-scale=1.0">
    <title>Shivam | Home</title>
    <style type="text/css">
    body {
        margin: 0;
        font-family: cursive;
        font-size: 20px;
        width: 100%;
        height: 5000px;
        }
    /*menu*/
        .nav {
            position: fixed;
            width: 100%;
            max-height: 180px;
            z-index: 999;
            margin: 0;
            padding-left:0;
            background: #eee;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);

        }
        .nav li {
            float: right;
            list-style-type: none;
            position: relative;
            font-size: 1em; 
            color: #111;
            display: block;
            line-height: 3em;
            overflow: hidden;   
        }
        .nav li a {
            color: #111;
            display: block;
            padding: 0 26px;
            text-decoration: none;
            transition: 0.25s all ease;
            overflow: hidden;
        }
        .actv{
            background: #08f;
            color: #fff;
            box-shadow: 0 0 5px rgba(0, 136, 255, 0.5);
            transition: 1s ease;
        }
        .navback{
            background: #eee;
            position: fixed;
            width: 100%;
            z-index: 998;
            height: 60px;
            border-bottom: #08f solid 2px;
        }
        .logo{
            background: #08f;
            cursor: default;
        }
        .sm{
            width: 0;
            height: 0;
            border-left: 30px solid #08f;
            border-bottom: 30px solid transparent;
            border-top: 30px solid transparent;
            padding: 0 0 0 15;
        }

    /*side bar*/
        #btn{
            color: #111;
            cursor: pointer;
            transition:1s;
            padding-left:50px;
            float:right;
            font-size: 25px;
            line-height: 60px;
        }
        .overlay {
            height: 100%;
            width: 0%;
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 0;
            background: #08f;
            overflow: hidden;
            transition: 0.5s;
            box-shadow: 2px 0 10px rgba(0,0,0,0.5);
        }

        .overlay-content {
            position: relative;
            top: 25%;
            width: 100%;
            text-align: center;
            margin-top: 30px;
        }

        .overlay a {
            padding: 8px;
            text-decoration: none;
            font-size: 36px;
            color: #eee;
            display: block;
            transition: 0.3s;
        }

        .overlay-content a:after {
          content: '';
          display: block;
          position: absolute;
          left: 50%;
          top: 50%;
          width: 1000px;
          height: 1000px;
          margin-left: -500px;
          margin-top: -500px;
          background: #eee;
          border-radius: 100%;
          opacity: 1;
          transform: scale(0);
        }

        .overlay .closebtn {
            position: absolute;
            top: 20px;
            right: 45px;
            font-size: 60px;
        }
        .overlay-content a:not(:active):after {
          animation: ripple 1s ease-out infinite;
        }

        .overlay-content a:after {
          visibility: hidden;
        }

        .overlay-content a:focus:after {
          visibility: visible;
        }
        .act{
            background: #eee;
        }
        @media only screen and (max-width: 945px){
            .nav{
                background: #08f;
            }
            .nav #a{
                display: none;
            }
            #logo{
                margin-left: 10%;
            }
            #logo a{
                padding-right: 0;
            }
        }
        @media only screen and (min-width: 945px){
            #btn{
                display: none;
            }
        }
    </style>
    <script type="text/javascript">
        function openNav() {
        document.getElementById("myNav").style.width = "65%";
        }
        function closeNav() {
            document.getElementById("myNav").style.width = "0%";
        }
    </script>
</head>
<body>
<!Submenu>  
    <ul class="nav">
        <li class="logo" style="padding:0;float: left;" title="Open Menu" id="btn" onclick="openNav()"><a><font color="#eee">&#9776;</font></a></li>
        <li style="float: left;" id="logo" class="logo"><a title="Shivam"><font color="#eee" size="40px">Shivam</font></a><li id="a" style="float: left;" class="sm"></li></li>
            <li id="a"><a>&nbsp;</a></li><li id="a"><a>&nbsp;</a></li><li id="a"><a>&nbsp;</a></li>
            <li id="a"><a title="Contact With Shivam" href="contact.html">Contact</a></li>
            <li id="a"><a title="About Shivam" href="about.html">About Me</a></li>
            <li id="a"><a title=" Shivam's Works" href="works.html">My Works</a></li>
            <li id="a"><a title="Homepage"class="actv">Home</a></li>

    </ul>
    <div id="myNav" class="overlay">
      <a title="Close Menu" href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="overlay-content">
            <a title="Home" class="act"><font color="#08f">Home</font></a><hr>
            <a title="Works" href="works.html">Works</a><hr>
            <a title="About" href="about.html">About</a><hr>
            <a title="Contact" href="contact.html">Contact</a>
        </div>
    </div>
</body>

Answer 1

您忘记了标题中此视图端口链接中的名称

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

媒体查询无法在Chrome的响应模式下工作

问题描述

1 个解决方案

解决方案1
2

媒体查询无法在Chrome的响应模式下工作

问题描述

1 个解决方案

解决方案1 2

解决方案1
2