Максимальная ширина медиа-запросов не применяется, хотя я нахожусь в мобильном режиме (браузер) ⇐ CSS

[Anonymous]

У меня есть веб-сайт в Astro, и я использую SCSS.
У меня странная ошибка с медиа-запросами.
У меня такой стиль

Код: Выделить всё

@media screen and (max-width: 768px) {
.p-content {
&_inner {
padding: rem(140) 10% rem(150);
}
}
}

Это следует применить для меньшего экрана с максимальной шириной 768 пикселей.
Для остального я использую

Код: Выделить всё

.p-content {
&_inner {
padding: rem(140) 30% rem(150);
}

Пока это работает.
Когда я переключаюсь на консоль разработчика и перехожу к адаптивному представлению, стиль применяется правильно, но когда я меняю устройстве не применяется стиль максимальной ширины, а применяется обычный стиль.
Я даже пытался применить настройку только с минимальной шириной 1024 пикселя, например.
Даже в этом случае , этот стиль применяется, хотя размер представления определенно меньше 1024 пикселей (независимо от того, какую ширину я выбираю, всегда применяется минимальная ширина: 1024 пикселя).
Это ошибка браузера ?
У меня уже есть этот параметр width=device-width, Initial-scale=1.0.
Как вы можете видеть, например iPhone 12 Pro – не понимаю почему

Код: Выделить всё

@media screen and (min-width: 1024px) {
.p-content_inner {
padding: calc(140rem / 16) 30% calc(150rem / 16);
}
}

применяется?
Я создал код в изолированной программной среде кода.
Эта проблема возникает и у меня.
Думаю, это должно быть ошибка моего браузера?
Проверено на Chrome и Edge.
https://codesandbox.io/p/sandbox/still-sun-hz2gxq?file =%2Findex.html



Подробнее здесь: https://stackoverflow.com/questions/787 ... ew-browser