медиа-запросы для телефона

Question

Я пытаюсь использовать медиазапросы, чтобы иметь стиль для экранов размером более 768 пикселей и еще один для экрана размером менее 768 пикселей, когда я изменяю размер окна, изменения происходят, но когда я открываю веб-сайт с телефона или с помощью телефона в инспекторе 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;
    }

}