browser-detection

Attention: détecter un browser, sa version, le système d’exploitation, etc… via JS est une pratique qui montre ses limites. En effet, vous allez créer un site pour des navigateurs modernes et qui utilise les dernières versions de bibiothèques comme jQuery, Bootstrap, etc… La présence dans la source d’une bibliothèque comme jQuery 3.x, par exemple, va générer des erreurs en console et empêcher un script comme browser-detection de s’exécuter. Les classes ie, ie-8, etc... ne s’afficheront pas et vous ne pourrez déclencher ni JS, ni CSS si vous tablez sur leur présence.

browser-detection
Platform
Bowser
From scratch

Plug-in jQuery browser-detection.js sur GitHub.

Affecte les classes suivantes à l’élément html: win chrome chrome-61.

Les +
- Nomenclature très front-end-dev-friendly !!! Les classes sont tout en minuscules, les mots au sein d’une même classe sont séparés par des tirets, les termes sont minimalistes et pertinents.
- Edit du 06/10/2017: détecte les navigateurs EDGE depuis le tag 0.3.4. Evolution réalisée par kermit6000 (Thomas).
Les –
- ~~Ne détecte pas EDGE :/ (détecte Edge 15 comme win chrome chrome-52).~~

Platform

Les sources de Platform (A platform detection library that works on nearly all JavaScript platforms) sur GitHub.

$('html').addClass(platform.name+' '+platform.version+' '+platform.os);

1	$('html').addClass(platform.name+' '+platform.version+' '+platform.os);

Affecte les classes suivantes à l’élément html: Chrome 61.0.3163.100 Windows 10 64-bit.

Les +
- Détecte EDGE
Les –
- Nomenclature pas du tout front-end-dev-friendly: inclut des majuscules, des espaces et des points dans les noms des classes (Chrome, Windows 10 64-bit, 61.0.3163.100) et les versions des navigateurs peuvent être trop précises (61.0.3163.100).

Bowser

Les sources de Bowser (a browser detector by Lance Dikson) sur GitHub.

$('html').addClass(bowser.name+' '+bowser.version);

1	$('html').addClass(bowser.name+' '+bowser.version);

Affecte les classes suivantes à l’élément html: Chrome 61.0.

Les +
- Détecte EDGE
Les –
- N’ai pas réussi à afficher le type d’OS, mais uniquement sa version…

From scratch

How to find the operating system version using JavaScript

console.log(navigator);

1	console.log(navigator);

Detect MacOS, iOS, Windows, Android and Linux OS with JS

function getOS() {
  var userAgent = window.navigator.userAgent,
      platform = window.navigator.platform,
      macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
      windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
      iosPlatforms = ['iPhone', 'iPad', 'iPod'],
      os = null;

  if (macosPlatforms.indexOf(platform) !== -1) {
    os = 'Mac OS';
  } else if (iosPlatforms.indexOf(platform) !== -1) {
    os = 'iOS';
  } else if (windowsPlatforms.indexOf(platform) !== -1) {
    os = 'Windows';
  } else if (/Android/.test(userAgent)) {
    os = 'Android';
  } else if (!os && /Linux/.test(platform)) {
    os = 'Linux';
  }

  return os;
}

alert(getOS());

function getOS() {

var userAgent = window.navigator.userAgent,

platform = window.navigator.platform,

macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],

windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],

iosPlatforms = ['iPhone', 'iPad', 'iPod'],

os = null;

if (macosPlatforms.indexOf(platform) !== -1) {

os = 'Mac OS';

} else if (iosPlatforms.indexOf(platform) !== -1) {

os = 'iOS';

} else if (windowsPlatforms.indexOf(platform) !== -1) {

os = 'Windows';

} else if (/Android/.test(userAgent)) {

os = 'Android';

} else if (!os && /Linux/.test(platform)) {

os = 'Linux';

}

return os;

}

alert(getOS());

JavaScript iOS version detection

/*
 * Outputs a float representing the iOS version if user is using an iOS browser i.e. iPhone, iPad
 * Possible values include:
 *	3 - v3.0
 *	4.0 - v4.0
 *	4.14 - v4.1.4
 *	false - Not iOS
 */
 
var iOS = parseFloat(
	('' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,''])[1])
	.replace('undefined', '3_2').replace('_', '.').replace('_', '')
) || false;

* Outputs a float representing the iOS version if user is using an iOS browser i.e. iPhone, iPad

* Possible values include:

* 3 - v3.0

* 4.0 - v4.0

* 4.14 - v4.1.4

* false - Not iOS

var iOS = parseFloat(

('' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,''])[1])

.replace('undefined', '3_2').replace('_', '.').replace('_', '')

) || false;

Edit du 04/10/2017: le plug-in Bowser ayant montré ses limites également, j’ai créé un nouveau billet qui liste les plugins JS de détection de browser, version, OS et les pour et contres d’utilisation.

Edit du 31/08/2017: le plug-in Browser Detection fonctionne très bien mais ne détecte pas le navigateur Microsoft Edge. Se tourner vers Bowser – A Browser detector. Because sometimes, there is no other way, and not even good modern browsers always provide good feature detection mechanisms.

JS Fiddle de demo ici.

Plug-in jQuery browser-detection.js sur GitHub.

Dans l’exemple ci-dessous, on cherche à détecter l’utilisation de Safari et sa version. Pour les versions 8 et antérieures (signifiées par la valeur 600 ou moins en suffixe de la classe safari-* ajoutée à l’élément html par le plug-in browser-detection.js et pour les autres navigateurs, on ne lance pas la fonction maFonction.

    jQuery(document).ready(function(){
        // https://github.com/sub2home/browser-detection
        browserDetection({
          addClasses: true
        });

        function maFonction(){
          // ici, le code de votre fonction
        }

        var isSafari = jQuery('html.safari').length;
        if (isSafari == 1) {
          var getClassValue = jQuery('*[class*="safari-"]').attr('class').split('safari-')[1];
          if (getClassValue <= 600){
            // alert('<=600');
            // do nuffin'
          }
          else {
            // alert('>600');
            maFonction();
          }
        }
        else {
          maFonction();
        }
    });

jQuery(document).ready(function(){

// https://github.com/sub2home/browser-detection

browserDetection({

addClasses: true

});

function maFonction(){

// ici, le code de votre fonction

}

var isSafari = jQuery('html.safari').length;

if (isSafari == 1) {

var getClassValue = jQuery('*[class*="safari-"]').attr('class').split('safari-')[1];

if (getClassValue <= 600){

// alert('<=600');

// do nuffin'

}

else {

// alert('>600');

maFonction();

}

else {

maFonction();

}

});

Articles récents

Catégories

Archives

Méta

Étiquette : browser-detection

[Javascript] Détecter l’OS, le navigateur, sa version et autres avec un plugin JS