Wykrywanie, czy używana jest przeglądarka na urządzeniu mobilnym (telefon i tablet z systemem iOS/Androidem)

Question

Czy istnieje sposób na wykrycie, czy używana jest przeglądarka przenośna (telefon i tablet/iOS/Android)?

Próbowałem tego, aby element był o połowę szerszy w przeglądarce na urządzeniu przenośnym, ale to nie ma znaczenia.

width: 600px; 
@media handheld { width: 300px; } 

Czy można to zrobić, a jeśli tak, to w jaki sposób?

edit: Z określoną stronę w odpowiedzi jmaes' użyłem

@media only screen and (max-device-width: 480px).

Answer 1

Aktualizacja (czerwiec 2016): I teraz starają się wspierać dotykowy myszy i wejście na każdej rozdzielczości, ponieważ urządzenie jest krajobraz powoli zacierając granice między tym, co rzeczy są i nie dotykać urządzenia. Tablety iPad są dostępne tylko dotykowo z rozdzielczością laptopa 13 "Laptopy z systemem Windows są teraz często wyposażone w ekrany dotykowe:

Inne podobne odpowiedzi (patrz inna odpowiedź na to pytanie) mogą mieć różne sposoby sprawdzenia, co rodzaj urządzenia użytkownik korzysta, ale żaden z nich nie są idiotoodporny. Zachęcam do sprawdzenia tych odpowiedzi, jeśli koniecznie musisz spróbować ustalić urządzenia.

---

iPhone, na przykład, ignorować handheld zapytanie (Source). Nie zdziwiłbym się, gdyby inne smartfony również zrobiły to z podobnych powodów:

Obecny najlepszy sposób na wykrycie urządzenia mobilnego to poznanie jego szerokości i użycie go do przechwycenia go przez corresponding media query. Ten link zawiera listę popularnych. Szybkie wyszukiwanie w Google przyniosłoby ci wszystko, czego możesz potrzebować, jestem tego pewien.

Aby uzyskać więcej informacji o telefonie iPhone (takich jak ekran Retina), sprawdź pierwszy opublikowany przeze mnie link.

Answer 2

Wykrywanie urządzeń mobilnych

odpowiedź pokrewne: https://stackoverflow.com/a/13805337/1306809

Nie ma pojedynczy podejście to naprawdę niezawodny. Najlepiej jest mieszać i dopasowywać różne sztuczki w razie potrzeby, aby zwiększyć szanse na skuteczne wykrycie szerszego zakresu urządzeń przenośnych. Zobacz powyższy link, aby uzyskać kilka różnych opcji.

Answer 3

Nie wykrywaj urządzeń mobilnych, zamiast nich korzystaj z urządzeń stacjonarnych.

W dzisiejszych czasach (2016) istnieje sposób wykrywania punktów na cal/cm/px, który wydaje się działać w większości nowoczesnych przeglądarek (patrz http://caniuse.com/#feat=css-media-resolution). Potrzebowałem metody rozróżniania między stosunkowo małym ekranem, orientacją nie ma znaczenia, a stacjonarnym monitorem komputerowym.

Ponieważ wiele przeglądarek mobilnych nie obsługują tego, można napisać ogólny kod CSS dla wszystkich przypadków i wykorzystywać ten wyjątek dla dużych ekranów:

@media (max-resolution: 1dppx) { 
    /* ... */ 
} 

Zarówno Windows XP i 7 mają domyślne ustawienie 1 kropka na piksel (lub 96dpi). Nie wiem o innych systemach operacyjnych, ale działa to bardzo dobrze dla moich potrzeb.

Edytuj: dppx nie działa w przeglądarce Internet Explorer .. zamiast tego użyj (96) dpi.

Answer 4

Wiem, że to stary wątek, ale myślałem, że to może pomóc komuś:

Urządzenia mobilne mają większą wysokość niż szerokość, w przeciwieństwie, komputery mają większą szerokość niż wysokość. Na przykład:

@media all and (max-width: 320px) and (min-height: 320px) 

, więc trzeba to zrobić dla każdej szerokości, jak sądzę.

Answer 5

Uważam, że znacznie bardziej niezawodnym sposobem wykrywania urządzeń mobilnych jest przeglądanie łańcucha navigator.userAgent. Na przykład w moim iPhone ciąg agenta użytkownika jest:

Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_2 jak Mac OS X) AppleWebKit/603.2.4 (KHTML, like Gecko) Version/10,0 Mobile/14F89 Safari/602.1

Należy zauważyć, że ten ciąg zawiera dwa ostrzegawcze słowa kluczowe: iPhone i telefon komórkowy. Inne ciągi agenta użytkownika dla urządzeń, które nie mam są pod adresem:

https://deviceatlas.com/blog/list-of-user-agent-strings

Stosując ten ciąg, ustawić zmienną logiczną JavaScript bMobile na mojej stronie albo prawdziwe lub fałszywe stosując następujący kod: