web-dev-qa-db-fra.com

Meilleure façon de déterminer si l'utilisateur est sur un appareil mobile

Je montre une barre de notification sur mon site Web et, franchement, cela ne fonctionne pas bien si c'est sur un appareil mobile. Je voudrais montrer la barre UNIQUEMENT pour les utilisateurs de bureau.

Quel est le moyen le plus simple de déterminer si un utilisateur est sur le bureau ou sur le mobile?

javascriptmobiledesktop
13
RailsTweeter

Vérifiez ceci http://detectmobilebrowsers.com/

Travailler pour Javascript, jQuery, etc.

8
injetkilo

Une vérification d'agent d'utilisateur est la "plus simple", bien que vous puissiez facilement employer les requêtes de média CSS3

Voici un exemple qui vérifie iphone, Android et blackberry; vous pouvez facilement ajouter d'autres navigateurs mobiles.

var is_mobile = !!navigator.userAgent.match(/iphone|Android|blackberry/ig) || false;
7
Rob M.

Je trouve qu'il est préférable d'utiliser la détection de fonctionnalités. Utilisez Modernizr pour détecter s’il s’agit d’un appareil tactile. Vous pouvez faire des choses comme:

var mousedown = 'mousedown';

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

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

Et utilisez ensuite CSS Media Queries pour gérer la largeur de l’écran (il est également facile de détecter la largeur de l’écran en javascript). De cette façon, vous pouvez gérer correctement les appareils tactiles avec de grands écrans ou les appareils non tactiles avec de petits écrans.

7
Jonathan Potter

Si vous utilisez modernizr . une classe "sans contact" sera ajoutée à l'élément. Vous pouvez masquer la barre par défaut et ajouter une règle CSS pour afficher la barre si la classe "sans contact" existe. Exemple:

défaut:

.bar{display:none;}

bureau:

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