Napisałem wtyczkę jQuery, która jest przeznaczona do użytku na komputerach i urządzeniach mobilnych. Zastanawiałem się, czy JavaScript umożliwia wykrycie, czy urządzenie ma funkcję ekranu dotykowego. Używam jquery-mobile.js do wykrywania zdarzeń na ekranie dotykowym i działa na iOS, Android itp., Ale chciałbym również napisać instrukcje warunkowe na podstawie tego, czy urządzenie użytkownika ma ekran dotykowy.
Czy to jest możliwe?
javascript
jquery
touch
screenm0nkey
źródło
źródło
Odpowiedzi:
Aktualizacja: Przed pobraniem całej biblioteki wykrywania funkcji do projektu przeczytaj odpowiedź blmstr poniżej. Wykrywanie faktycznej obsługi dotykowej jest bardziej złożone, a Modernizr obejmuje tylko podstawowy przypadek użycia.
Modernizr to świetny, lekki sposób na wykrywanie wszelkiego rodzaju funkcji w dowolnej witrynie.
Po prostu dodaje klasy do elementu HTML dla każdej funkcji.
Następnie możesz łatwo kierować te funkcje w CSS i JS. Na przykład:
I JavaScript (przykład jQuery):
źródło
Modernizr.touch
niespodziewanie powróciundefined
, możesz mieć dostosowanego Modernizatora (możesz wybrać i wybrać) bez obsługi wykrywania zdarzeń dotykowych.Próbowałeś użyć tej funkcji? (Jest to to samo, co używane przez Modernizr.)
AKTUALIZACJA 1
document.createEvent("TouchEvent")
zaczęli wracaćtrue
w najnowszym chrome (v. 17). Modernizr zaktualizował to jakiś czas temu. Sprawdź test Modernizr tutaj .Zaktualizuj swoją funkcję w ten sposób, aby działała:
AKTUALIZACJA 2
Odkryłem, że powyższe nie działało na IE10 (zwracanie wartości false na MS Surface). Oto poprawka:
AKTUALIZACJA 3
'onmsgesturechange' in window
zwróci true w niektórych wersjach pulpitu IE, więc to nie jest niezawodne. Działa to nieco bardziej niezawodnie:AKTUALIZACJA 2018
Czas płynie, a są nowe i lepsze sposoby na przetestowanie tego. Zasadniczo wyodrębniłem i uprościłem sposób sprawdzania przez Modernizr:
Tutaj używają niestandardowej
touch-enabled
funkcji zapytania o media, co moim zdaniem jest dziwną i złą praktyką. Ale hej, w prawdziwym świecie myślę, że to działa. W przyszłości (gdy wszystkie będą obsługiwane) te funkcje zapytań o media mogą dać te same wyniki:pointer
ihover
.Sprawdź źródło, w jaki sposób robi to Modernizr .
Dobry artykuł, który wyjaśnia problemy z wykrywaniem dotyku, zobacz: Stu Cox: Nie można wykryć ekranu dotykowego .
źródło
true
albofalse
. Możesz przeczytać więcej na ten temat tutaj: stackoverflow.com/questions/4686583/…in
operator już ocenia na wartość logiczną.'onmsgesturechange'
ocenia prawdę nawet w urządzeniach bezdotykowych (PC).window.navigator.msMaxTouchPoints
wydaje się być dokładniejszy. Znalazłem to tutaj .Ponieważ Modernizr nie wykrywa IE10 na Windows Phone 8 / WinRT, proste rozwiązanie dla różnych przeglądarek to:
Trzeba tylko raz sprawdzić, ponieważ urządzenie nagle nie obsługuje lub nie obsługuje dotyku, więc po prostu zapisz go w zmiennej, aby móc używać go wiele razy bardziej wydajnie.
źródło
return !!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator);
(aby połączyć obie odpowiedzi) Działa również dobrze w IE10!'onmsgesturechange' in window
zwraca true na pulpicie IE10, nawet jeśli dotyk jest możliwyfunction isTouchDevice() { return 'ontouchstart' in window || !!(navigator.msMaxTouchPoints);}
Korzystając ze wszystkich powyższych komentarzy, skompilowałem następujący kod, który działa na moje potrzeby:
Przetestowałem to na iPadzie, Androidzie (przeglądarka i Chrome), Blackberry Playbook, iPhone 4s, Windows Phone 8, IE 10, IE 8, IE 10 (Windows 8 z ekranem dotykowym), Opera, Chrome i Firefox.
Obecnie nie działa w systemie Windows Phone 7 i nie byłem jeszcze w stanie znaleźć rozwiązania dla tej przeglądarki.
Mam nadzieję, że ktoś uzna to za przydatne.
źródło
true
na moim Firefoksie 32 na Windows 7 :(Od czasu wprowadzenia funkcji mediów interaktywnych możesz po prostu:
https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-pointer
Aktualizacja (z uwagi na komentarze): powyższym rozwiązaniem jest wykrycie, czy „zgrubny wskaźnik” - zwykle ekran dotykowy - jest głównym urządzeniem wejściowym. Jeśli chcesz sprawdzić, czy urządzenie, na przykład mysz, ma również ekran dotykowy, możesz
any-pointer: coarse
zamiast tego użyć .Aby uzyskać więcej informacji, spójrz tutaj: Wykrywanie, że przeglądarka nie ma myszy i jest tylko dotykowa
źródło
(pointer: coarse)
ponieważ najprawdopodobniej jesteś ukierunkowany tylko na główny wkład. Może być stosowany w produkcji, ponieważ kilka nieobsługiwanych przeglądarek jest przeznaczonych wyłącznie na komputery. Jest świetny artykuł na ten temat na temat sztuczek css .Podoba mi się ten:
źródło
function isTouchDevice(){ return (window.ontouchstart !== undefined); }
var isTouch = 'ontouchstart' in window;
jednak nie działa to z najnowszym Chrome (v31),var isTouch = 'createTouch' in window.document;
nadal działa.touchstart
nie rozpoznają urządzenia Surface jako urządzenia dotykowego, ponieważ IE używapointer
zdarzeń.Jeśli korzystasz z Modernizr , jest bardzo łatwy w użyciu,
Modernizr.touch
jak wspomniano wcześniej.Jednak wolę używać kombinacji
Modernizr.touch
testów użytkownika i użytkownika, dla bezpieczeństwa.Jeśli nie korzystasz z Modernizr, możesz po prostu zastąpić
Modernizr.touch
powyższą funkcję('ontouchstart' in document.documentElement)
Należy również pamiętać, że testowanie agenta użytkownika
iemobile
zapewni szerszy zakres wykrytych urządzeń mobilnych Microsoft niżWindows Phone
.Zobacz także to SO pytanie
źródło
/(iphone|ipod|ipad|android|iemobile|blackberry|bada)/.test(window.navigator.userAgent.toLowerCase())
Wypróbowaliśmy implementację modernizatora, ale wykrywanie zdarzeń dotykowych nie jest już spójne (IE 10 ma zdarzenia dotykowe na pulpicie systemu Windows, IE 11 działa, ponieważ porzucono zdarzenia dotykowe i dodano interfejs API wskaźnika).
Postanowiliśmy więc zoptymalizować witrynę jako witrynę dotykową, o ile nie wiemy, jaki typ danych wejściowych ma użytkownik. Jest to bardziej niezawodne niż jakiekolwiek inne rozwiązanie.
Nasze badania mówią, że większość użytkowników komputerów przesuwa kursor myszy nad ekranem przed kliknięciem, dzięki czemu możemy je wykryć i zmienić zachowanie, zanim będą mogli kliknąć lub najechać kursorem.
To jest uproszczona wersja naszego kodu:
źródło
Working Fiddle
Osiągnąłem to w ten sposób;
źródło
Jest coś lepszego niż sprawdzenie, czy mają ekran dotykowy, to sprawdzenie, czy go używają, a ponadto łatwiej to sprawdzić.
źródło
Ten działa dobrze nawet w tabletach z systemem Windows Surface !!!
źródło
Użyłem fragmentów powyższego kodu do wykrycia, czy dotyk, więc moje fantazyjne ramki iframe pojawiały się na komputerach stacjonarnych, a nie dotykowe. Zauważyłem, że Opera Mini dla Androida 4.0 wciąż rejestruje się jako urządzenie bezdotykowe, gdy używa samego kodu blmstr. (Czy ktoś wie dlaczego?)
Skończyło się na tym, że:
źródło
/iPhone|iPod|iPad|Android|BlackBerry/
?Największa „gotcha” z próbą wykrycia dotyku dotyczy urządzeń hybrydowych, które obsługują zarówno dotyk, jak i gładzik / mysz. Nawet jeśli jesteś w stanie poprawnie wykryć, czy urządzenie użytkownika obsługuje dotyk, tak naprawdę musisz zrobić to, z którego urządzenia wejściowego korzysta aktualnie użytkownik . Tutaj jest szczegółowy opis tego wyzwania i możliwe rozwiązanie .
Zasadniczo podejście do dowiedzieć się, czy dany użytkownik po prostu dotknął ekranu lub używana jest mysz / trackpad zamiast to zarejestrować się zarówno
touchstart
imouseover
imprezy na stronie:Akcja dotykowa wyzwoli oba te zdarzenia, chociaż pierwsza (
touchstart
) zawsze jest pierwsza na większości urządzeń. Licząc na przewidywalną sekwencję zdarzeń, możesz stworzyć mechanizm, który dynamicznie dodaje lub usuwacan-touch
klasę do katalogu głównego dokumentu, aby odzwierciedlić aktualny typ danych wejściowych użytkownika w tym momencie w dokumencie:Więcej informacji tutaj .
źródło
Sprawdź ten post , daje naprawdę fajny fragment kodu dotyczący tego, co zrobić, gdy wykryte zostaną urządzenia dotykowe lub co zrobić, gdy wywoływane jest zdarzenie touchstart:
źródło
Unikałbym używania szerokości ekranu w celu ustalenia, czy urządzenie jest urządzeniem dotykowym. Istnieją ekrany dotykowe znacznie większe niż 699px, pomyśl o Windows 8. Navigatior.userAgent może być przyjemny, aby zastąpić fałszywe postawy.
Polecam sprawdzenie tego problemu w Modernizr.
Czy chcesz sprawdzić, czy urządzenie obsługuje zdarzenia dotykowe, czy jest urządzeniem dotykowym. Niestety to nie to samo.
źródło
Nie, to niemożliwe. Doskonałe odpowiedzi są zawsze tylko częściowe, ponieważ każda metoda da fałszywe pozytywne i fałszywe negatywne. Nawet przeglądarka nie zawsze wie, czy ekran dotykowy jest obecny, ze względu na interfejsy API systemu operacyjnego, a fakt może się zmienić podczas sesji przeglądarki, szczególnie w przypadku konfiguracji typu KVM.
Zobacz dalsze szczegóły w tym doskonałym artykule:
http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
Artykuł sugeruje, aby ponownie rozważyć założenia, które sprawiają, że chcesz wykryć ekrany dotykowe, prawdopodobnie są one błędne. (Sprawdziłem własną aplikację i moje założenia rzeczywiście były błędne!)
Artykuł podsumowuje:
źródło
Wiele z nich działa, ale albo wymagają jQuery, albo linters javascript narzekają na składnię. Biorąc pod uwagę, że twoje początkowe pytanie wymaga „JavaScript” (nie jQuery, nie Modernizr) sposobu rozwiązania tego problemu, oto prosta funkcja, która działa za każdym razem. Jest to również tak minimalne, jak to tylko możliwe.
Ostatnią zaletą, o której wspomnę, jest to, że ten kod jest niezależny od frameworka i urządzenia. Cieszyć się!
źródło
function isTouchScreen() { return window.matchMedia('(hover: none)').matches;}
To zadziałało dla mnie, dlatego dodam coś do tej odpowiedzi, ponieważ spodziewałem się także waniliowego wątku JS, gdy Google mnie tu sprowadził.Wygląda na to, że Chrome 24 obsługuje teraz zdarzenia dotykowe, prawdopodobnie w systemie Windows 8. Więc zamieszczony tutaj kod już nie działa. Zamiast próbować wykryć, czy przeglądarka obsługuje dotyk, teraz wiążę zdarzenia dotyku i kliknięcia i upewniam się, że wywoływane jest tylko jedno:
A potem nazywając to:
Mam nadzieję że to pomoże !
źródło
Wszystkie obsługiwane przeglądarki oprócz Firefoksa dla komputerów stacjonarnych są zawsze PRAWDZIWE, ponieważ Firefox dla komputerów stacjonarnych obsługuje responsywne projektowanie dla programistów, nawet jeśli klikniesz przycisk dotykowy lub nie!
Mam nadzieję, że Mozilla naprawi to w następnej wersji.
Korzystam z przeglądarki Firefox 28.
źródło
true
:(jQuery v1.11.3
W udzielonych odpowiedziach jest wiele dobrych informacji. Ale ostatnio spędziłem dużo czasu próbując związać wszystko razem w działające rozwiązanie dla osiągnięcia dwóch rzeczy:
Poza tym postem i wykrywaniem urządzeń dotykowych z JavaScriptem , ten post przez Patricka Lauke był niezwykle pomocny: https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how /
Oto kod ...
Ważny! The
*.on( events [, selector ] [, data ], handler )
potrzeb Sposób mieć przełącznik, zazwyczaj element, który można obsługiwać z „touchstart” zdarzenie lub inne podobne zdarzenia związanego z elementami. W tym przypadku jest to element hiperłącza „a”.Teraz nie musisz obsługiwać zwykłego klikania myszą w JavaScript, ponieważ możesz użyć CSS do obsługi tych zdarzeń za pomocą selektorów dla elementu „a” hiperłącza, takiego jak:
Uwaga: Istnieją również inne selektory ...
źródło
lub
byłby to dokładniejszy test, jak sądzę.
źródło
ua
odnosi się donavigator.userAgent
. Wykrywanie na podstawie szerokości ekranu może również dać fałszywy wynik, jeśli ktoś otworzy przeglądarkę w trybie innym niż pełnoekranowy.Używam:
w jQuery mobile 1.0.1
źródło
Miałem też wiele problemów z różnymi opcjami wykrywania w JavaScript, czy strona jest wyświetlana na urządzeniu z ekranem dotykowym, czy nie. IMO, jak na razie, nie istnieje żadna prawdziwa opcja do prawidłowego wykrycia opcji. Przeglądarki albo zgłaszają zdarzenia dotykowe na komputerach stacjonarnych (ponieważ system operacyjny może być gotowy na dotyk), albo niektóre rozwiązania nie działają na wszystkich urządzeniach mobilnych.
W końcu zdałem sobie sprawę, że od samego początku podążałem za niewłaściwym podejściem: jeśli moja strona miałaby wyglądać podobnie na urządzeniach dotykowych i bezdotykowych, być może nie powinienem w ogóle martwić się wykryciem właściwości: Mój scenariusz był aby dezaktywować podpowiedzi nad przyciskami na urządzeniach dotykowych, ponieważ prowadzą one do podwójnego stuknięcia, w którym chciałem jednego stuknięcia, aby aktywować przycisk.
Moim rozwiązaniem było przefakturowanie widoku, tak aby nie było potrzeby wyświetlania podpowiedzi nad przyciskiem, a ostatecznie nie musiałem wykrywać urządzenia dotykowego w Javascript za pomocą metod, które mają swoje wady .
źródło
Możesz zainstalować modernizator i użyć prostego zdarzenia dotykowego. Jest to bardzo skuteczne i działa na każdym urządzeniu, które przetestowałem, w tym na powierzchni okien!
Stworzyłem jsFiddle
źródło
Wydaje się, że praktyczna odpowiedź dotyczy kontekstu:
1) Witryna publiczna (bez logowania)
Kod interfejsu użytkownika do pracy z obiema opcjami jednocześnie.
2) Witryna logowania
Sprawdź, czy w formularzu logowania nastąpił ruch myszy, i zapisz to w ukrytym wejściu. Wartość jest przekazywana z poświadczeniami logowania i dodawana do sesji użytkownika , dzięki czemu można jej używać na czas trwania sesji.
Jquery, aby dodać tylko do strony logowania:
(+1 do @Dave Burt i +1 do @Martin Lantzsch w odpowiedziach)
źródło
Problem
Ze względu na urządzenia hybrydowe, które wykorzystują kombinację wprowadzania dotykowego i myszy, musisz być w stanie dynamicznie zmieniać stan / zmienną, która kontroluje, czy fragment kodu powinien być uruchamiany, jeśli użytkownik jest użytkownikiem dotykowym, czy nie.
Urządzenia dotykowe również uruchamiają się
mousemove
po dotknięciu.Rozwiązanie
touchstart
zdarzenie zostanie uruchomione, a następnie ustaw wartość true.Testowane na Safari iOS i Chrome na Androida.
Uwaga: brak 100% pewności co do zdarzeń wskaźnika dla MS Surface itp.
Demo Codepen
źródło
Właściwie to zbadałem to pytanie i rozważyłem wszystkie sytuacje. ponieważ jest to również duży problem w moim projekcie. Więc osiągam poniższą funkcję, działa dla wszystkich wersji wszystkich przeglądarek na wszystkich urządzeniach:
Wskazówka : Zdecydowanie po
isTouchDevice
prostu zwracaboolean
wartości.źródło
Rozszerzony
support
obiekt jQuery :A teraz możesz to sprawdzić w dowolnym miejscu, na przykład:
źródło
Wydaje mi się, że do tej pory działało to dobrze:
źródło
Gdy mysz jest podłączona, można założyć z dość wysokim przepływem danych (powiedziałbym praktycznie 100%), że użytkownik porusza myszką co najmniej niewielką odległość po przygotowaniu strony - bez żadnego kliknięcia. Mechanizm poniżej to wykrywa. Jeśli zostanie wykryty, uważam to za oznakę braku obsługi dotyku lub, jeśli jest obsługiwana, ma niewielkie znaczenie, gdy używana jest mysz. Zakłada się, że urządzenie dotykowe zostanie wykryte.
EDYTOWAĆ To podejście może nie pasować do wszystkich celów. Można go użyć do sterowania funkcjami aktywowanymi na podstawie interakcji użytkownika na ładowanej stronie, na przykład przeglądarki zdjęć. Poniższy kod pozostawi również zdarzenie mousemove związane na urządzeniach bez myszy, ponieważ wyróżnia się teraz. Inne podejścia mogą być lepsze.
Z grubsza wygląda to tak (przepraszam za jQuery, ale podobnie w czystym JavaScript):
źródło