Sto visualizzando una barra di notifica sul mio sito Web e, francamente, non funziona bene quando è su un dispositivo mobile. Mi piacerebbe mostrare la barra SOLO per gli utenti desktop.Il modo più semplice per determinare se l'utente è sul dispositivo mobile
Qual è il modo più semplice per determinare se un utente è sul desktop o sul cellulare?
Scegli questa http://detectmobilebrowsers.com/
lavoro per JavaScript, jQuery ecc
Il codice fornito dal collegamento funziona perfettamente per me in un sito Web ASP.net. –
Un controllo user agent è il più "facile", anche se si potrebbe facilmente impiegano CSS3 media queries
Ecco un esempio che controlla iPhone, Android e BlackBerry; potresti facilmente aggiungere altri browser mobili.
var is_mobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false;
Beh, non ho fatto un downvote (sembra che nessuno lo abbia fatto ora ...) ma la tua espressione regolare è un po 'scarsa. – Pointy
Abbastanza corretto, non stavo cercando di coprire tutti i browser mobili, fornendo solo un esempio di come potrebbe essere fatto. Suppongo che avrei dovuto dirlo. –
@Pointy molto. Ad esempio, non provare per Windows Phone. Forse le query sui media sono le migliori poiché ogni browser ora lo implementa. –
trovo che è meglio utilizzare il rilevamento funzione. Utilizzare Modernizr per rilevare se si tratta di un dispositivo touch. È possibile fare cose come:
var mousedown = 'mousedown';
if (Modernizr.touch) {
mousedown = 'touchstart';
}
$('.foo').on(mousedown, handleMouseDown);
E poi usare i CSS media query per la gestione di larghezza dello schermo (ed è anche facile da rilevare larghezza dello schermo con javascript). In questo modo puoi gestire correttamente i dispositivi touch con schermi di grandi dimensioni o dispositivi non touch con schermi piccoli.
...e puoi nascondere/mostrare/modificare elementi con CSS perché Modernizr aggiunge la classe "touch" all'elemento '' per dispositivi touch. Quindi, '.touch #notificationBar {display: none; } '... – Pointy
Se si utilizza modernizr. una classe "no-touch" sarà aggiunta all'elemento. È possibile nascondere la barra per impostazione predefinita e aggiungere una regola css per mostrare la barra se esiste la classe "no-touch". Esempio:
di default:
.bar{display:none;}
desktop:
.no-touch .bar{display:block;}
potrebbe non essere più ottimale poiché ci sono dispositivi touch che non sono esplicitamente mobili -> vedi surface pro (per essere chiari può essere un tablet che è mobile), toccare laptop come lenovo, ecc. E sono certo che arriverà un'intera nuova serie di dispositivi touch – Daemedeor
Penso che si dovrebbe usare le media query per determinare la capacità effettiva, invece di user-agent per determinare supposta capacità. –
Non ce n'è davvero uno. È necessario esplorare * perché * non funziona (a quale funzione mancano i telefoni cellulari) e utilizzare il rilevamento delle funzioni e le query multimediali per determinare se deve essere visualizzato o meno. – Chad
invece di rilevare cellulare o desktop, penso che, nel tuo scenario, abbia più senso rilevare la risoluzione dello schermo. – lbstr