:-moz-system-metric(touch-enabled) выглядит действительно полезным селектором CSS для работы на мобильных сайтах.Webkit-эквивалент: -moz-system-metric (touch-enabled)
К сожалению, Webkit доминирует на мобильных устройствах для сенсорных устройств, и кто-нибудь знает, есть ли эквивалент Webkit?
(В идеале было бы хорошо, если бы это было в ведении запросов CSS3 медиа)
Edit:Looks like it is supported in Gecko as a media query
Chrome еще один браузер, который пытался реализовать подобный селектор, но, к сожалению, он был удален из на данный момент.
Modernizr может быть и интересным инструментом обнаружения, так как он также может обнаруживать события касания.
Там нет никакого способа, чтобы сделать это, не прибегая к Javascript, в настоящее время.
Как @easwee сказал, Modernizr - это хорошо расцененная библиотека JS, которая фокусируется на обнаружении признаков. Вы можете использовать его тест touch для вашего прецедента.
Если вам не нужны все колокола и свистки Modernizr, вы можете сделать следующее:
A) Загрузите следующий JS, как в начале вашего <body> тега, как вы можете:
<script type="text/javascript">
if(!!window.TouchEvent) body.className += " touch-enabled ";
</script>
B) Напишите свой CSS. Поскольку Gecko использует медиа-запрос, чтобы сообщить вам о сенсорной доступности, вы должны надуть сенсорный конкретных CSS, например, так:
BODY.touch-enabled DIV.foo
{
/* touch-specific CSS */
}
@media screen and (-moz-touch-enabled)
{
DIV.foo
{
/* touch-specific CSS */
}
}
Если код за селектором идентичен в обоих случаях, GZIP должны оптимизируйте часть дублирования. (Надеюсь, вы используете сжатие.)
В ответе Яна Вессмана тест !!window.TouchEvent работает некорректно. В текущем настольном браузере Chrome (23.0.1271.52, Linux) window.TouchEvent является функцией, поэтому код Ian рассматривает браузер с сенсорным экраном.
Если вам нужен короткий код, вероятно, лучше скопировать-вставить relevant code from Modernizr.
https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js – eimaj