響應式 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 單位，但如果必須，請嘗試在視口尺寸變小時稍微縮小元素。

響應式 WEB 在開發工具上的外觀與在實際手機上的外觀不同

問題描述

1 個解決方案

解決方案1
0 2021-04-24 23:15:23

響應式 WEB 在開發工具上的外觀與在實際手機上的外觀不同

問題描述

1 個解決方案

解決方案1 0 2021-04-24 23:15:23

解決方案1
0 2021-04-24 23:15:23