JavaScript est le langage principal pour le développement front-end. Nous pouvons déterminer le type et la version du navigateur en écrivant des programmes JavaScript. Il existe généralement deux manières pour JavaScript de déterminer le type de navigateur. L'une est basée sur les attributs uniques de différents navigateurs et l'autre est déterminée en analysant l'attribut userAgent du navigateur. Cet article analyse les caractéristiques userAgent de chaque navigateur et donne une méthode de jugement :
Série de navigateurs du système d'exploitation Windows :
Série de navigateurs IE :
Performances caractéristiques : tous sont basés sur Cela commence par "mozilla/", et le x.0 (compatible; msie x.0; windows nt", mais ce n'est généralement pas nécessaire
Firefox pour Windows :
Caractéristiques : commençant par "mozilla/x.0", y compris "windows nt", "gecko/" et "firefox/" ;
Méthode de jugement : un jugement approximatif ne peut rechercher que les chaînes "firefox/" et "windows nt", un jugement strict peut rechercher "mozilla/", " Windows nt", "gecko/" et "firefox/" quatre chaînes ;
Chrome pour Windows :
Caractéristiques : commençant par "mozilla/x.0", y compris "windows nt", "chrome/" et incluant également "applewebkit/", "safari/" ;
Méthode de jugement : un jugement approximatif ne peut rechercher que les chaînes "windows nt" et "chrome/", un jugement strict peut rechercher "mozilla/", "windows nt", "applewebkit" /"," safari/", "chrome/" cinq chaînes ;
Opera pour Windows :
Caractéristiques : commençant par "opera/" et contenant les chaînes "windows nt", "presto/" ;
Jugement Méthode : jugez grossièrement pour récupérer uniquement les chaînes "windows nt" et "opera/", jugez strictement pour récupérer "opera/", "windows nt" et "presto/" en même temps
Safari pour Windows : Performances des fonctionnalités : il commence par "mozilla/" et contient "windows nt", "applewebkit/", "safari/"
Méthode de jugement : un jugement approximatif peut être fait en recherchant "windows nt", "safari/" ; " mais pas "chrome/" ", un jugement strict doit contenir "mozilla/", "windows nt", "applewebkit/", "safari/" mais pas "chrome/"
Résumé : l'agent utilisateur du navigateur sur le Le système d'exploitation Windows contient tous la chaîne « Windows NT » pour représenter le système d'exploitation Windows.
Série de navigateurs de plateforme iPhone :
iPhone est livré avec Safari :
Caractéristiques : commençant par "mozilla/", contenant la chaîne "iphone", et contenant également "mobile/", " safari/" string ;
Méthode de jugement : le jugement approximatif recherche uniquement les chaînes "iphone" et "safari/", le jugement strict doit inclure "mozilla/", "iphone", "mobile/", "safari" /"Four chaînes
Opera Mobile pour iPhone :
Caractéristiques : Commençant par "opera/", contenant la chaîne "iphone", et contenant également les chaînes "opera mini/" et "presto/"
Méthode de jugement : Le jugement approximatif ne récupère que les chaînes "iphone" et "opera/", le jugement strict doit inclure les quatre chaînes "opera/", "iphone", "opera mini/" et "presto/"
Résumé : Le navigateur userAgent sur l'iPhone, tous contiennent la chaîne "iphone"
Série de navigateurs de plate-forme Android :
Le propre navigateur d'Android (certaines personnes disent qu'il s'agit en fait de Chrome, mais Google lui-même n'a fait aucune représentation et est je développe toujours un Chrome to Phone fonctionnant sur Android) :
Caractéristiques : Commençant par "mozilla/", contenant les chaînes "android" et "linux", et contenant également "applewebkit/", la chaîne "mobile safari/" Méthode de jugement : Parce que nous ne savons toujours pas s'il y aura un safari indépendant sur Android à l'avenir (probablement pas), il est recommandé de juger strictement directement et de rechercher "mozilla/", "android", "linux" ,"applewebkit/","mobile safari/" cinq chaînes
Opera Mobile pour Android :
Caractéristiques : Commençant par "opera/", contenant les caractères "android" et "linux" Chaîne, contenant à la fois "opera mobi/ " et "presto/" chaînes ;
Méthode de jugement : le jugement approximatif recherche uniquement "android" et "opera/", le jugement strict nécessite à la fois "opera/" et "android", "linux", "opera mobi/" , "presto/" cinq chaînes
Firefox pour Android :
Caractéristiques : commençant par "mozilla/", contenant les chaînes "android" et "linux", Contient "firefox/", "gecko/", "fennec/ " chaînes en même temps ;
Méthode de jugement : le jugement approximatif recherche uniquement "android" et "firefox/", le jugement strict nécessite à la fois "mozilla/", "android", "linux", "firefox/", " gecko/", "fennec/" six chaînes
Résumé : Le navigateur userAgent sur la plate-forme Android contient les chaînes "android" et "linux"
L'analyse ci-dessus des navigateurs grand public pour les trois principales plates-formes de Windows, iPhone et Android sont fondamentalement terminés. On estime que Linux sur d'autres plates-formes est au moins similaire à la plate-forme Android, tandis que l'iPad et le Macintosh utilisant Mac OS devraient être similaires à la plate-forme iPhone, je ne ferai donc pas l'analyse. pour le moment, parce que je n'ai pas beaucoup d'appareils et de systèmes d'exploitation sur lesquels tester, j'espère pouvoir me rattraper à l'avenir.
Les exigences actuelles en matière de développement de produits de sites Web sont différentes d'avant, car elles doivent non seulement satisfaire la navigation sur ordinateur, mais également satisfaire les utilisateurs via les smartphones (ici, il s'agit uniquement de vrais smartphones tels que iPhone, Android, Windows Phone, Blackberry Nous ne considérerons pas pour le moment les systèmes semi-intelligents de niche tels que Palm. Quant au système pseudo-intelligent Symbian, jouons avec.) À travers les trois plates-formes représentatives ci-dessus, nous pouvons déduire approximativement la solution pour juger l'appareil utilisateur. basé sur le navigateur userAgent .
1. Si vous devez déterminer le système d'exploitation, la méthode est relativement simple. Recherchez la chaîne suivante dans userAgent :
Contient "windows nt" : Évidemment, le système d'exploitation Windows, le numéro de version après nt Vous pouvez déterminer la version du système d'exploitation ;
Contient "mac" : Mac OS d'Apple ;
Contient "ipad" : tablette Apple iPad (les données montrent que l'agent utilisateur du navigateur de l'iPad contient également "mac", "iphone ", "ipad");
Contient "linux" : le système d'exploitation Linux ou autre Linux est le système d'exploitation du noyau;
Contient "android" : le système d'exploitation Android de Google, qui peut être un smartphone ou une version Android de une tablette. Généralement, le userAgent sur la plateforme Android doit également contenir "linux" ;
contient l'un des "unix", "sunos" et "bsd" : système Unix. En fait, l'expérience utilisateur de ce système peut être presque ignoré à l'heure actuelle ;
contient "ubuntu" : ubuntu Version personnalisée de Linux
...
Vous avez également vu qu'il n'est pas toujours utile de déterminer le système d'exploitation et sa version , mais il y a toujours des endroits où il peut être utilisé, comme le développement spécifiquement pour iPhone, iPad et Android Attendez la page avec la résolution de l'écran de l'appareil
2. La méthode pour déterminer le noyau du navigateur n'est pas difficile . Je l'ai découvert moi-même, mais ce n'est peut-être pas toujours correct :
Noyau IE (Trident) (Inutile de dire que IE pour Mac, IEs4Linux et autres, seuls ceux sous Windows sont pris en compte) : en commençant par "mozilla/" et contenant les chaînes "windows nt" et "msie" ;
Noyau Firefox (Gecko) : commençant par " Il commence par mozilla/" et contient les chaînes "firefox/" et "gecko/". la version a également la chaîne "fennec/" ;
Noyau Opera () : commence par "opera/", contient la chaîne "presto/", la version iPhone a également "opera mini/", et la version Android a également "opera mobi/";
Webkit core : commence par "mozilla/" et contient la chaîne "applewebkit/" et "safari/", celui avec "chrome/" est le navigateur Chrome, et celui sans celui-ci est Safari ou autres ;
Ce qui précède est le noyau principal du navigateur
Le noyau du navigateur est Le problème clé pour résoudre le problème de compatibilité est, cependant, ce problème de compatibilité a été résolu pour vous par des frameworks tels que jQuery et Extjs. Par conséquent, ce jugement n'est utilisé que lorsque le style CSS des pages individuelles a des effets de rendu différents selon les noyaux. Bien entendu, le même noyau rendra des résultats différents sur différents appareils tels que les smartphones et les ordinateurs, ce qui doit également être noté.
3. Exemples d'applications pratiques pour juger de l'utilisation du navigateur :
Différents noyaux de navigateur ont des effets de rendu différents sur les pages. Bien que jQuery et Extjs aient effectué un traitement de compatibilité pour nous, il y en aura toujours. quelques petites différences que nous devons traiter séparément. À l'heure actuelle, nous devons juger du noyau du navigateur
Les utilisateurs n'accèdent pas aux sites Web uniquement via des ordinateurs, en utilisant ces deux-là. La proportion d’internautes est de plus en plus élevée. Que dois-je faire ? Les tablettes sont acceptables, avec de grands écrans et des résolutions élevées. Les smartphones sont limités par la taille et la résolution de leur écran. Bien qu'ils aient une forte puissance de traitement et puissent parfaitement prendre en charge les sites Web existants, cela ne fait jamais de mal de penser davantage à vos clients, n'est-ce pas ? Après tout, il est très inconfortable de visualiser des pages Web avec un zoom partiel et un glisser-déposer. À l'heure actuelle, nous pouvons fournir une version dédiée à la mise en page pour les écrans étroits tels que ceux de l'iPhone et d'Android. Premièrement, cela peut améliorer l'expérience de navigation, et deuxièmement, cela peut améliorer l'expérience de navigation. cela peut réduire le trafic réseau. , pour accélérer l'accès ;
Faites une analyse du trafic des visiteurs, optimisez et concevez votre propre site Web en déterminant les types de navigateurs des clients et en enregistrant leurs numéros, pour améliorer respectivement leur expérience client
ou :
Méthode de détection du navigateur dans le code source de l'éditeur open source KindEditor :
KE = {}; navigateur = (function () {
var ua = navigator.userAgent.toLowerCase();
return {
VERSION:ua.match(/(msie|firefox|webkit|opera)[/:s] (d )/) ? RegExp .$2 : "0",
IE:(ua.indexOf("msie") > -1 && ua.indexOf("opera") == -1),
GECKO:(ua.indexOf( "gecko") > -1 && ua.indexOf("khtml") == -1),
WEBKIT:(ua.indexOf("applewebkit") > -1),
OPÉRA :(ua .indexOf("opera") > -1)
}
})(
;
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
