电话媒体查询

Question

我正在尝试使用媒体查询为大于 768px 的屏幕提供一种样式，为小于 768px 的屏幕提供另一种样式 当我调整窗口大小时，变化正在发生，但是当我使用手机或 Chrome 检查器中的手机视图打开网站时，它无法按我的预期工作。 谢谢！

@media (max-width: 768px) {
    body {
        background-color: lightblue;
    }
}

@media (min-width: 768px) {
    body {
        display: flex;
        justify-content: center;
    }

    #cont {
        background-color: aqua;
        width: 80vw;
    }

    #header {
        height: 30vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    #tophead {
        background-color: blueviolet;
        height: 5vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #lefttophead {
        height: 80%;
        width: 40%;
        background-color: yellow;
    }

    #righttophead {
        height: 80%;
        width: 20%;
        background-color: orange;
    }

    #lowhead {
        height: 10vh;
        background-color: gold;
        display: flex;
        align-items: center;
    }

    #navbar {
        height: 80%;
        width: 100%;
        background-color: hotpink;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #onglets {
        width: 70%;
        height: 80%;
        background-color: cadetblue;
    }

    #searchbar {
        width: 20%;
        height: 80%;
        background-color: skyblue;
    }

}

Answer 1

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

用于html head