Как правильно писать media-запросы?

Question

[mardari98]

Сделал media-запросы для экранов до 900px и 768px. Думал что это для смартфонов, но не тут то было. Даже на моём стареньком Xiaomi ширина экрана 1080px, что не намного меньше чем ширина экрана моего ноутбука. В итоге никакой адаптивности на телефоне я не получаю. Может это как-то по-другому делается?

Я пишу:

@media screen and (max-width: 900px)

Comments

[Ankhena]

Откройте вот эту ссылочку на смартфоне и она покажет, что его вьюпорт вовсе не 1080px. Поэтому, все media будут нормально работать, если укажете правильный meta viewport.

Answer 1

[Deeno]

Проверь наличие в head такой штуки

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

Comments

[mardari98]

Спасибо большое! Теперь работает.

Answer 2

[Евгений]

Из-за того, что появились устройства с экраном большой плотности, единица px - пиксель перестала ровняться одному физическому пикселю, и стала условной, устройства масштабируют эти единицы измерения под свой экран.