Как через css задать отдельные стили для тачскрина?

Question

[Павло Пономаренко]

Есть вполне простая задача - описать некоторые отличия в верстке для всех тачскрин устройств (хотя бы мобильных). Как сейчас принято отличать мобильные от не-мобильных в css? Потому что интернет советует всякую жесть вроде такого:

/* для планшетов и фаблетов */
@media (min-width: 481px) and (max-width:768px) {/* ... */}

/* для декстопов */
@media (min-width:769px) {/* ... */}

И, естественно, в такую выборку совершенно не попадает, например FullHD Android с маленьким экраном, на котором кнопки останутся крайне мелкими ии сложными для нажатия.

И пока все, что я нахожу - либо сомнительное, вроде ориентации исключительно на iPhone либо вообще неработающее вроде проверки ширины экрана.

Comments

[Сергей delphinpro]

https://modernizr.com/

.no-touchevents .box { color: red; }
.touchevents .box { color: green; }

Answer 1

[Михаил Горячкин]

На css вряд ли у вас со 100% вероятностью получится определить тип устройства. Так что js вам в помощь, есть кучка скриптов для определения устройств. Вот к примеру которым пользуюсь я mobile-detect. С помощью него ставьте класс и прописывайте для него любое поведение. Забыл, если поддержка всеми браузерами не так важна, то конечно можете попробовать CSS4 media query draft