:-moz-system-metric(touch-enabled) wygląda na bardzo przydatny selektor CSS do pracy na stronach mobilnych.Webkitowy odpowiednik: -moz-system-metryczny (dotykowy)
Niestety Webkit dominuje na mobilnych urządzeniach dotykowych, więc czy ktoś wie, czy istnieje odpowiednik Webkita?
(Najlepiej to byłoby dobrze, gdyby ten był zarządzany przez zapytaniami mediów CSS3)
Edit:Looks like it is supported in Gecko as a media query
Chrome jest inna przeglądarka, która próbowała wdrożyć podobny przełącznik, ale niestety został usunięty z Na razie.
Modernizr może być i interesujące narzędzie wykrywające, ponieważ może wykrywać również zdarzenia dotykowe.
Nie ma sposobu, aby to osiągnąć bez uciekania się do Javascript w chwili obecnej.
Jak powiedział @easwee, Modernizr to dobrze znana biblioteka JS, która koncentruje się na wykrywaniu cech. Możesz użyć testu touch dla swojego przypadku użycia.
Jeśli nie potrzebujesz wszystkich wodotryski modernizr, można wykonać następujące czynności:
A) Załaduj następujące JS już w tagu <body> jak można:
<script type="text/javascript">
if(!!window.TouchEvent) body.className += " touch-enabled ";
</script>
B) Napisz swój CSS. Od Gecko używa zapytania mediów poinformować o dostępności dotykowym, musisz dupe CSS dotykowy specyficzne, jak w przykładzie:
BODY.touch-enabled DIV.foo
{
/* touch-specific CSS */
}
@media screen and (-moz-touch-enabled)
{
DIV.foo
{
/* touch-specific CSS */
}
}
Jeśli kod per-selektor jest identyczna w obu przypadkach powinien GZIP zoptymalizować część duplikacji. (Korzystasz z kompresji, mam nadzieję.)
W odpowiedzi Iana Wessmana test !!window.TouchEvent działa niepoprawnie. W bieżącym pulpicie Chrome (23.0.1271.52, Linux) window.TouchEvent to funkcja, więc kod Iana uważa obsługę przeglądarki za dotkniętą.
Jeśli chcesz uzyskać krótki kod, najlepiej skopiować i wkleić relevant code from Modernizr.
https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js – eimaj