Не работает @media на телефоне, (min-width: 480px) and (max-width: 720px) — разрешение телефона 720 width, что это такое?

Question

[Кирилл]

@media (min-width: 480px) and (max-width: 720px) {
    h1 {
        color: red;
    }
}

Если ставить меньше диапазон то стили работают, с чем это связанно?

Comments

[sergey]

Вот этот ресурс покажет реальный размер устройства, юзайте относительно него media queries

Answer 1

[Кирилл]

Это означает что ширина экрана для браузера на вашем телефоне <480px.

Comments

[Кирилл]

А это у всех так, что браузер считает разрешения экрана меньше чем на самом деле?

[Кирилл]

Кирилл, почитайте про Device pixel ratio

[Кирилл]

Кирилл, Спасибо большое!

Answer 2

[ivasenkoartem]

Ширина меньше