CSS: медиа-запросы на p c и телефоне

Question

Во время изучения Emacs я создаю веб-страницу ( Prince ). Количество столбцов управляется следующими директивами:

body {
    font-family: var(--s-font-family);
    font-size: var(--normal-font-size);
    column-count: 3;
    column-gap: 10px;
}
@media screen and (min-width: 800px) {
    body {
        column-count: 3;
        column-gap: 10px;
    }
}
@media screen and (min-width: 600px) and (max-width: 799px) {
    body {
        column-count: 2;
        column-gap: 8px;
    }
}
@media screen and (max-width: 599px) {
    body {
        column-count: 1;
        column-gap: 0;
    }
}

, как вы можете видеть в таблице стилей CSS .

Теперь, если я проверю приведенный выше код на моем рабочем столе p c (с Firefox 70), изменяя ширину окна браузера, все работает как положено. Но когда я открываю страницу со своим смартфоном (размер которого составляет 774x412 пикселей, как сообщает webfx ), я вижу все три столбца, как если бы медиа-запросы полностью игнорировались браузером.

Где может быть проблема?

Answer 1

вам просто нужно добавить следующие метатеги в заголовок вашей страницы html

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

Попробуйте добавить

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

в начало страницы