正常浏览无法缩小网站宽度，检查模式却可行，原因何在？

问题 #

如您所见，我在浏览模式下无法进一步缩小宽度，但在检查模式下可以。这是为什么？

我尝试使用@media和max-width进行调整，但没有效果。为什么正常浏览时无法改变网站宽度，检查模式下却可以？我查看了代码，但没发现问题。

网站代码 #

HTML部分：

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <meta name="description" content="N"/>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="main.css" type="text/css"/>
    <meta name="robots" content="all"/>
</head>
<body>

    <section id="contact">
    
        <div class="social">
        
            <a href="#"><i class="fa fa-facebook-f"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-instagram"></i></a>
            <a href="#"><i class="fa fa-dribbble"></i></a>
            <a href="#"><i class="fa fa-behance"></i></a>
            
        </div>
        
        <div class="contact-box">
        
            <div class="c-heading">
                <h1>Get In Touch</h1>
                <p>Call Or Email Us Regarding Question Or Issues</p>
            </div>
        
        </div>
        
        <div class="map">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1701.5252574812218!2d74.31603229143637!3d31.46779655679461!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391906abd2d8f2db%3A0x2d4bd93a1eb25b41!2sArfa%20Technologies!5e0!3m2!1sen!2s!4v1596774150754!5m2!1sen!2s" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> 
        </div>
    
    </section>

</body>
</html>

CSS部分：

body{
    margin:0px;
    padding: 0px;
    background-color: #FFFFFF;
}

a{
    text-decoration: none;
}

.social a{
    padding: 20px;
    color:#7b7c7c;
    font-size:1.1rem;
}
#contact{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
}
.social{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
}
.social a:hover{
    color:#000000;
    transition: all ease 0.3s;
}
.contact-box{
    background-color:#434445;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 30px;
    box-shadow: 2px 0px 30px rgba(0,0,0,0.1);
}
.c-heading h1{
    font-family: Roboto;
    color: #e7eef3;
    font-size: 2.5rem;
    font-weight: lighter;
    margin: 0px;
    padding: 0px;
}
.c-heading p{
    font-family: Roboto;
    color:#cecece;
    font-size: 0.8rem;
    font-weight: lighter;
    margin: 0px;
    padding: 0px;
    text-align: center;
}

.map{
    
    box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
}

@media(max-width:1100px){
    .map{
        display: none;
    }
}

@media(max-width:450px){
    .social{
        display: none;
    }
    .contact-box{
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
    }
    #contact{
        position: static;
        transform: translate(0,0);
        width:100%;
        height: 100vh;
        box-sizing: border-box;
    }
    .c-heading h1{
        font-size: 2.2rem;
        text-align: center;
    }
}

解决方案 #

问题出在iframe的固定宽度上——你给iframe设置了width="600"，这个固定值会强制页面在浏览模式下保持最小600px宽度，因为浏览器不会自动收缩到比内容更窄的尺寸。而检查模式下，浏览器会忽略内容的固定宽度限制，允许你继续缩小视口来测试响应式效果。

解决步骤：

1. 移除iframe的固定width属性，改用CSS实现自适应：
   删掉iframe标签里的width="600"，然后在CSS中添加：

   .map iframe {
       width: 100%;
       height: 450px;
   }
   

   这样iframe会自适应父容器宽度，不再限制页面最小宽度。

2. 优化视口元标签（可选，提升移动端体验）：
   将原视口标签替换为更完整的配置：

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

   确保移动端缩放行为符合预期，但这不是核心问题，核心修复还是iframe的宽度设置。

修改后，页面在浏览模式下就能正常缩小到小于600px的宽度，和检查模式效果一致。

内容的提问来源于Stack Exchange，提问作者Adam D