Najprostszy sposób określenia, czy użytkownik jest na urządzeniu mobilnym

Question

Wyświetlam pasek powiadomień na mojej stronie internetowej, i szczerze mówiąc, nie działa on dobrze, gdy jest na urządzeniu mobilnym. Chciałbym wyświetlić pasek TYLKO dla użytkowników komputerów stacjonarnych.

Jaki jest najłatwiejszy sposób ustalenia, czy użytkownik jest na komputerze lub urządzeniu mobilnym?

Answer 1

Sprawdź to http://detectmobilebrowsers.com/

Praca dla Javascript, jQuery itp

Answer 2

Czek kliencka jest „najprostszym”, choć można łatwo zatrudnić CSS3 media queries

Oto przykład, który sprawdza, iPhone, Android i Blackberry; można łatwo dodać inne przeglądarki mobilne.

var is_mobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false; 

Answer 3

Uważam, że najlepiej użyć funkcji wykrywania. Użyj Modernizr, aby wykryć, czy jest to urządzenie dotykowe. Można robić takie rzeczy jak:

var mousedown = 'mousedown'; 

if (Modernizr.touch) { 
    mousedown = 'touchstart'; 
} 

$('.foo').on(mousedown, handleMouseDown); 

a następnie użyć CSS mediów zapytań do obsługi szerokości ekranu (i to również łatwe do wykrycia szerokości ekranu z javascript). W ten sposób można prawidłowo obsługiwać urządzenia dotykowe z dużymi ekranami lub urządzenia bez dotykowe z małymi ekranami.

Answer 4

Jeśli używasz modernizr. klasa "bezdotykowa" zostanie dodana do elementu. Domyślnie możesz ukryć pasek i dodać regułę css, aby wyświetlić pasek, jeśli istnieje klasa "bezdotykowa". Przykład:

domyślnie:

.bar{display:none;}

pulpit:

.no-touch .bar{display:block;}