web-dev-qa-db-fra.com

Detect Desktop Browser (non mobile) avec Javascript

J'ai trouvé le code suivant pour détecter un navigateur de bureau. Mais la méthode détecte également certains navigateurs mobiles. Comment détecter uniquement les navigateurs de bureau tels que Safari, IE, Firefox, Opera, etc.?

is_desktopBrowser : function() {
    var ua = navigator.userAgent.toLowerCase();

    var rwebkit = /(webkit)[ \/]([\w.]+)/;
    var ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/;
    var rmsie = /(msie) ([\w.]+)/;
    var rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/;

    var match = rwebkit.exec(ua) ||
            ropera.exec(ua) ||
            rmsie.exec(ua) ||
            ua.indexOf("compatible") < 0 && rmozilla.exec(ua) ||
            [];

    return { browser: match[1] || "", version: match[2] || "0" };
},
javascriptmobile
25
fabian

jQuery.browser peut être utile pour essayer de savoir quel navigateur. jQuery.browser a été supprimé de jQuery 1.9. 

Je crois qu’il est basé sur navigator.UserAgent, cependant navigator.UserAgent peut vous dire le système d’exploitation seul si vous le souhaitez.

Essaye ça:

var isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(Android)|(webOS)/i)

la source

19
sky-dev

Je vérifie 

('ontouchstart' in window)

puisque cela me dira si je suis sur un appareil capable de toucher. Bien sûr, cela renvoie également la valeur true pour un ipad, qui peut ne pas être considéré comme un "appareil mobile", mais je vérifie simplement window.width à des fins de mise en page.

11
tim

Je suis venu avec ceci:

    var isTouchDevice = function() {  return 'ontouchstart' in window || 'onmsgesturechange' in window; };
    var isDesktop = window.screenX != 0 && !isTouchDevice() ? true : false;

Il tire parti de deux choses auxquelles nous pouvons nous accrocher. Un, window.screenX sera TOUJOURS à 0 sur n’importe quelle tablette/appareil mobile. Vous ne pouvez pas déplacer les fenêtres sur ces appareils, c'est toujours en plein écran.

Deuxièmement, isTouchDevice est un moyen assez fiable de savoir s’il s’agit d’un mobile (tablette Android/iPhone) ou Windows Surfacey. Il a un événement tactile. La combinaison des deux nous donne un haut degré de certitude que c'est un mobile ou une tablette. Si vous n'en faites pas partie, vous devez être un ordinateur de bureau. 

Oui, vous pouvez avoir un ordinateur de bureau qui se signale comme tactile et dont le navigateur est en haut à gauche. Dans mon cas, je peux laisser ça aller.

8
httpete

J'ai étudié cela pour mon projet ReView (Responsive Viewport). J'utilise une combinaison des éléments suivants.

  • window.screenX

La plupart des navigateurs mobiles ont la "fenêtre" verrouillée sur le côté gauche. Donc, si ce n'est pas zéro, probablement une fenêtre de navigateur de bureau.

  • window.devicePixelRatio et screen.width

Si dpr est égal à 1 et que la largeur de l'écran est signalée comme étant grande via screen.width, ce sera probablement le bureau.

  • fenêtre.orientation

Il est rare de trouver un moniteur de bureau en mode portrait. Cependant, cela pourrait arriver.

Il est plus improbable que de multiples changements d’orientation lors de l’utilisation de votre site/application. Cela implique qu'un utilisateur de bureau ferait tourner son écran… très peu probable.

Une combinaison de ceux-ci avec un peu de bon sens et vous pouvez obtenir une conjecture assez solide.

Le projet mentionné avec plus d’informations est à http://responsiveviewport.com

J'espère que cela pourra aider.

6
Edward

Vous pouvez aller à http://detectmobilebrowsers.com et générer un script JS qui détectera si un navigateur est un navigateur mobile. À moins que vous ne vous inquiétiez pour les téléviseurs intelligents ou d'autres appareils non mobiles ni de bureau, vous pouvez utiliser ce script et supposer que si le navigateur n'est PAS un navigateur mobile, il doit s'agir d'un navigateur de bureau.

Voici un exemple de solution utilisant les expressions rationnelles générées par ce site:

var ua = navigator.userAgent.toLowerCase();
var isDesktop = !(/(Android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|Kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|Palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)));
2
Dj.

Le problème avec votre script est qu’il essaie simplement de détecter le navigateur avec la chaîne UserAgent- qui n’est pas très précise car tout le monde peut simuler sa UserAgent. 

Pour une assez bonne lecture sur la détection du navigateur, consultez ce lien: http://www.quirksmode.org/js/detect.html

1
Neq

Incluez simplement le fichier Modernizr js. Il ajoute les classes dites non tactiles à tous les navigateurs de bureau, ce qui vous permet de cibler facilement ces classes

1
Shiva

Même si c'est un peu excessif pour votre cas, express-useragent est l'une des meilleures solutions car elle peut être utilisée à la fois sur le serveur et sur le navigateur. Ton cas:

Inclure le fichier js en HTML

<script type="text/javascript" src="/path/to/express-useragent.js"></script>

Exécuter le plugin

var userAgent = new UserAgent().parse(navigator.userAgent);

La valeur de userAgent sera quelque chose comme

{
  "isMobile":false,
  "isDesktop":true,
  "isBot":false,
  .....
  "browser":"Chrome",
  "version":"17.0.963.79",
  "os":"Windows 7",
  "platform":"Microsoft Windows",
  "source":"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.79..."
}
0
haotang