Как этот экран мультимедиа CSS нацелен на телефоны с шириной разрешения 1080p?

Я видел приведенный ниже медиа-запрос CSS, рекомендованный для целевых телефонов. Да, на моем телефоне работает. Однако мой телефон и многие другие имеют разрешение 1080 пикселей. Как это работает...?

@media screen and (max-width: 1024px) { }

css screen-resolution
person Joseph    schedule 13.06.2020    source источник
comment
stackoverflow.com/ questions / 27750983 / это может ответить на ваш вопрос   -  person Stackerexp    schedule 14.06.2020
comment
Спасибо @Stackerexp, действительно интересно и полезно   -  person Joseph    schedule 14.06.2020

Ответы (1)


arrow_upward
2
arrow_downward

Каждое устройство имеет физический размер в пикселях и соотношение для браузеров. Например, iPhoneX имеет разрешение 1125 пикселей и соотношение 3. Таким образом, ширина CSS будет 375 пикселей.

Таким образом, для экрана с физическим разрешением 1125 пикселей ваши медиафайлы будут

@media screen and (max-width: 375px) { }

Очень хорошая таблица с разрешениями устройств, соотношениями и шкалой CSS здесь:

https://www.mydevice.io/#compare-devices

Хотя в media можно определить -webkit-device-pixel-ratio и orientation, вот так

/* iPhone X in landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { /* STYLES GO HERE */}

Подробнее об этом здесь, http://stephen.io/mediaqueries/.

person focus.style    schedule 13.06.2020
comment
Спасибо @ focus.style, очень интересный и полезный сайт - person Joseph; 14.06.2020