Логика max-device-width?

Question

[habrdima]

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

@media screen and  (max-device-width : 1366px){
    header{
        display: none;
    }
}

но простой max-width: 900px работает когда окно меньше 900px, разве не такая же логика должна быть?

Comments

[Сергей delphinpro]

device-width
DEVICE
DEVICE, Карл. в переводе на русский - устройство!!!

Как думаешь, есть разница между шириной окна(браузера) и шириной монитора (устройства)?

[habrdima]

Сергей: суть вопроса в другом, их разницу я понимаю, но логику работы min и max для device не понимаю(( она отличается от (min, max)-width, как установить например диапозон размеров устройств?

[Сергей delphinpro]

habrdima: вы уверены? логика та же самая

[habrdima]

@media screen and (min-device-width: 980px){
    header{
        background: green;
    }
}

если указать такой код, то он работает только в тех случаях когда ширина устройства имеет размер до 980px, она может быть любой до 980, если указать max то заработает от 980 до бесконечности, как указать диапозон например от 980 до 1300?

Answer 1

[Сергей Горячев]

https://habrahabr.ru/company/paysto/blog/254871/
width и device-width это как бы разные вещи)

Comments

[habrdima]

их отличие понятны, но статья не отвечает на вопрос, мне нужна логика

[Сергей Горячев]

habrdima: женская подойдет?

[habrdima]

Сергей Горячев: и толку пошутил ты здесь?

[Сергей Горячев]

habrdima: потому, что логика у обоих совершенно одинаковая, разница только в том, о чего считается (от ширины страницы или от ширины устройства). больше никаких подводных камней тут нет.

[habrdima]

Сергей Горячев: походу у меня устройства глючат, у меня ноут показывет не то же самое что iphone 6(((

[Сергей Горячев]

habrdima: ctrl+0 сделай. Может с масштабами намудрил.

[habrdima]

Сергей Горячев: да нет, но ноут показывает свое, iphone другое, вьюпорт не ставил, он не нужен мне

[Сергей Горячев]

habrdima: тогда пиши на "Битву экстрасенсов", ибо "ноут показывает свое, iphone другое" явно не достаточное объяснение, чтобы понять твою проблему.

[habrdima]

Сергей Горячев: на ноуте медиа работает на min-device-width: 1366px, берет все размеры до 1366, на iphone window.innerWidth и document.documentElement.clientWidth показывает 980 но работает где то от 300

[Сергей Горячев]

habrdima: А может ты путаешь понятия пикселей для верстки и физические?
https://habrahabr.ru/post/145619/
Также вот полезный инструмент https://www.paintcodeapp.com/news/ultimate-guide-t...
Для верстки под айфон обычно 320 и используется, а не 980.

[Сергей Горячев]

Блин, не та ссылка. Ищу нужную.

[Ankhena]

habrdima: https://www.esolutions.se/en-GB/test откройте на телефоне.

Answer 2

[Стас Мельников]

в новой версии стандарта device-width является устаревшей функцией https://www.w3.org/TR/mediaqueries-4/#mf-deprecated