Как отловить десктопные устройства при помощи @media запроса?

Question

[minaev007]

Есть некоторый код который я хочу применять только при изменении окна браузера на пк

Comments

[Владимир]

А планшет с разрешением 1280/800 под какую категорию попадает?
Какой критерий деления? Монитор на шнурке, наличие тача, разрешение? Определитесь с формальными критериями, тогда сможете алгоритм написать.

Answer 1

[Михаил Захаров]

@media screen {

}

Comments

[Андрей]

а разве это не для всех устройств "экранного типа" и планшеты и телефоны и пк с ноутбуками?
https://www.w3.org/TR/CSS2/media.html

[Михаил Захаров]

Андрей: нет. Телефоны и планшеты, как минимум, это handheld.

[Андрей]

Михаил Захаров:
чет у меня не работает
media handheld and (max-width: 500px)
на моем iphone и на stackoverflow встречал инфу что ни android, ни ios не относят свои устройства к типу handheld, очень похоже что это свойство устарело(?)
Есть более точная информация или живые примеры?
вот тут и на русскоязычном "стаке" обсуждали и ссылка на хабр статью
https://ru.stackoverflow.com/questions/428020/medi...

[Михаил Захаров]

Андрей: в общем, задай в теге head метатег viewport, равный, например, 320px. Например:

<meta name=viewport content="width=320, initial-scale=1, user-scalable=no">

Мобильные устройства будут подстраивать сайт под это разрешение, а десктопные браузеры это проигнорят. Соответственно, так ты сможешь разделять на мобилы и компы. Это костыль, но он работает.
Для мобил:
@media screen and (max-width: 320px)
Для компов:
@media screen and (min-width: 321px)

Answer 2

[Андрей]

Как-то я тоже парился с разными стилями для мобильных устройств и настольного браузера при одинаковом (примерно) размере экрана/окна.
Можно с помощью https://modernizr.com/download#setclasses&q=touch отсортировать тач устройства от десктопных, мне тут (на тостере) посоветовали. Хорошая вещь.

Answer 3

[Владимир]

https://www.mydevice.io
screensiz.es
Эти ссылки помогут определиться с критериями.

Answer 4

[Кузя]

@media screen and (min-width="1024px") {

}