响应式 WEB 在开发工具上的外观与在实际手机上的外观不同

Question

我想知道是否有任何与媒体查询相关的事情，我不知道这使我的 web 项目在开发工具和移动设备上看起来不同。 需要明确的是，我制作了一个网页并开始添加媒体查询以使其具有响应性。 我使用 chrome dev-tools 选择 iphone se 作为目标，并开始重新排列每个元素，直到它看起来像我预期的那样。 像这样的东西：

在此处输入图像描述

但是当我在实际手机上打开网页时，它看起来像这样：

在此处输入图像描述

这是 css：

@media screen and (max-width: 330px ){ /*for iphone 5/se */

    #burter{
        top: 19vh;
        left: 24vw;
        font-size: 9vw;}
        
        #logo{
            width: 23vw;
            top: 17vh;
            left: 0vw;}
    
        #navtabs{
            top: 30vh;
            left: 2vw;
            flex-direction: row;
            height: 14vw;
            width: 88vw;}
        
        .divisor{
    
            width: 8%;}
    
    
        .tab{
    
            font-size: 4vw;}
    
        #imgside{
    
            display: none;}
    
        #sponsors{
    
            width: 88vw;
            height: 15vw;
            top: 40vh;
            left: 2vw;
            flex-direction: row;
        }
    
        .sponsimg{
            width: 14%;}
    
        #welcome{
    
            left: 28vw;}
    
        #welcome h2{
    
            font-size: 13vw;}
    
        #welcome p{
    
            width: 67vw;}
    
    
        .homecontainer{
    
            width: 64vw;
            left: 9vw;
            height: 43vh;
            top: 57vh;}
    
        .homeheader{
    
            font-size: 6vw;}
    
        .hometext{
    
            font-size: 3vw;
            line-height: 1.5;}
    
        #map{
    
            width: 70vw;
            left: 12vw;
            top: 53vh;
            height: 30vh;}
    
        #contactus{
    
            left: 26vw;
            top: 82vh;}
    
        #divmedia{
    
            width: 80vw;
            left: 7.7vw;
            bottom: 3vh;}
    
        .media{
    
            font-size: 9vw;}
    
        #menucontainer{
    
            top: 48vh;
            height: 75vh;
            width: 121vw;
            left: -14vw;
            justify-content: space-evenly;
        }
    }

和 html 但大多数 tings 是通过 vanilla js 创建的：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script defer  src="./main.js"></script>
    <title>Burter Burguer Inc.</title>
    <link rel = "icon" href = 
    "../images/burguerlogo/logo.png" 
            type = "image/x-icon">
    <link rel="stylesheet" href="stylesheet.css">
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA89atXDJHDp5fVs2YF-DB1fQXVbn3GgZM&callback=initMap">
    </script>

</head>
<body id="body">
        <div id="header">
            <img id="logo" src="../images/burguerlogo/logo.png">
            <h1 id="burter">BURTER INC.</h1>
            <div id="navtabs">
                <button id="homebutton" class="tab">HOME</button>
                <div class="divisor"></div>
                <button id="menubutton" class="tab">MENU</button>
                <div class="divisor"></div>
                <button id="contactbutton" class="tab">CONTACT</button>
            </div>
            <div class="removable" id="welcome">
                <h2>WELCOME</h2>
                <p>To your new favourite food...</p>
            </div>
                <img id="imgside" src="../images/Clever Photo Mashups by Stephen McMennamy.jpeg">
            <div id="sponsors">
                <img class="sponsimg" src="../images/mc_cain-removebg-preview.png">
                <img class="sponsimg" src="../images/cocacola-removebg-preview.png">
                <img class="sponsimg" src="../images/corona-removebg-preview.png">
                <img class="sponsimg" src="../images/heinz.png">
            </div>
        </div>
        <div style="display: none;" id="map"></div>
</body>
</html>

我正在寻找答案，但找不到任何可以帮助我的东西，所以我真的很感谢您的帮助以解决这些问题，因为我正在尝试建立一个投资组合，但非响应式网站看起来一点也不好看。 谢谢 ！

Answer 1

这可能是因为您对元素的定位是基于视口大小，但元素的实际大小不会根据视口缩小/扩展。 我个人不会使用 vh 单位，但如果必须，请尝试在视口尺寸变小时稍微缩小元素。