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
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 commewin chrome chrome-52).
Platform
|
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).
- Nomenclature pas du tout front-end-dev-friendly: inclut des majuscules, des espaces et des points dans les noms des classes (
Bowser
Les sources de Bowser (a browser detector by Lance Dikson) sur GitHub.
|
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
|
1 |
console.log(navigator); |
Detect MacOS, iOS, Windows, Android and Linux OS with JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* * 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; |