Как работают медиазапросы у смартфонах с fullHD разрешением?

Question

[Евгений]

Всем привет.
Не понятно вот что. Допустим имеется у меня верстка и один медия запрос в стилях: @media(max-width: 992px) {код}
Вопрос. Сработает ли этот медиа запрос у смартфона с разрешением 2000px? Или я что то путаю и недопонимаю. Спасибо.

Comments

[Rustam Bainazarov]

Вас не разрешение экрана интересует. Вас интересует разрешение viewport. Под него надо верстать.

Например, у iPhone XS ширина viewport — 375px, а реальное — 1125px. Всё дело в масштабировании.

Поэтому да, сработает. У телефонов обычно не больше 414px ширина viewport (XS Max). Есть ряд телефонов с ~500px.

Answer 1

[Диман Суворкин]

Разрешение экрана смартфона и та ширина, которую обрабатывает браузер - разные вещи. У них диапазон 320-480 px (как правило). Но дополнительно нужно указать viewport, иначе на мобилке ввиду её разрешения будет отображаться так, как на компе аналогичного разрешения, но оооооочень мелко. Подробнее.
Наглядная разница на этом фото:

Comments

[Евгений]

Хорошо, спасибо. На самом деле я уже пол года верстаю со всеми медиа запросами, но только сейчас в голову ударил вот этот пробел недопонимания разницы. Спасибо.

[Диман Суворкин]

toohappy, то же самое в начале было, когда учился) А потом посмотрел свою верстку через эмулятор в Chrome Dev Tools - ужаснулся