Last active
December 10, 2015 06:18
-
-
Save lerivin/4393058 to your computer and use it in GitHub Desktop.
Browser or Native browser environment detection
I use this script/class to help me write those nasty forks in my JS for different browsers, OSs, plateform(mobile, desktop), and of course pixel density.
This is proudly based on http://www.quirksmode.org/js/detect.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.Example = window.Example || {}; | |
Example.Environment = function() { | |
var | |
_$win = $( window ); | |
var environment = { | |
init: function () { | |
this.browser = this._searchString( this.dataBrowser ) || "An unknown browser"; | |
this.version = this._searchVersion( navigator.userAgent ) | |
|| this._searchVersion( navigator.appVersion ) | |
|| "an unknown version" | |
; | |
//this.platform = this.searchPlatform(); | |
this.OS = this._searchString( this.dataOS ) || "an unknown OS"; | |
// is mobile (ipad, iphone, android) | |
this.isMobile = this._determineMobile( this.dataMobileBrowsers ); | |
// currently we assume only mobile devices are touch | |
this.isTouch = this.isMobile; | |
// is native | |
this.isNative = this._determineNative(); | |
// viewport | |
this.viewport = this.calculateViewport(); | |
this.resolution = this._determineResolution(); | |
this.isHighResolution = this._determineHighResolution(); | |
// console.log('browser: ' + this.browser); | |
// console.log('version: ' + this.version); | |
// console.log('OS: ' + this.OS); | |
// console.log('isMobile: ' + this.isMobile); | |
// console.log('isNative: ' + this.isNative); | |
// console.log('isHighResolution: ' + this.isHighResolution); | |
// console.log(this.viewport.width + "x" + this.viewport.height); | |
// console.log(this.resolution.width + "x" + this.resolution.height); | |
} | |
/** | |
* Searches an array of data looking for specific values | |
* Used to determine the browser and the OS. | |
* | |
* @param {Array} data Array of strings to look through | |
* @return {String} The parsed string that was found (browser or OS) | |
*/ | |
, _searchString: function ( data ) { | |
var | |
i = 0 | |
, len = data.length | |
; | |
for ( i=0;i<len;i++ ) { | |
var dataString = data[ i ].string; | |
var dataProp = data[ i ].prop; | |
this.version_searchString = data[ i ].versionSearch || data[ i ].identity; | |
if (dataString) { | |
if (dataString.indexOf(data[i].subString) !== -1) { | |
return data[ i ].identity; | |
} | |
} | |
else if (dataProp) { | |
return data[ i ].identity; | |
} | |
} | |
} | |
/** | |
* Method determines the browser version. | |
* | |
* @param {String} dataString String to parse to look for the verion number | |
* @return {String} Version Number | |
*/ | |
, _searchVersion: function (dataString) { | |
var index = dataString.indexOf( this.version_searchString ); | |
if (index === -1) { | |
return; | |
} | |
return parseFloat( dataString.substring( index + this.version_searchString.length + 1 ) ); | |
} | |
/** | |
* Method determines if the platform is mobile (based on OS) | |
* @param {[type]} data [description] | |
* @return {[type]} [description] | |
*/ | |
, _determineMobile: function( data ) { | |
var | |
i = 0 | |
, len = data.length | |
; | |
for ( i = 0; i < len; i++ ) { | |
var identity = data[ i ].identity; | |
console.log('identity; ' + identity); | |
if (this.OS.indexOf( identity ) !== -1) { | |
return true; | |
} | |
} | |
return false; | |
} | |
/** | |
* Method determines if the app is running as a native application | |
*/ | |
, _determineNative: function() { | |
//console.log("window.device: " + window.device); | |
return ( window.device !== undefined ); | |
} | |
/** | |
* Method determines the systems screen resolution | |
* @return {Object} Object contain the screen's width and height | |
*/ | |
, _determineResolution: function() { | |
return { | |
width: screen.width | |
, height: screen.height | |
}; | |
} | |
, _determineHighResolution: function() { | |
var pixelRatio = window.devicePixelRatio ? window.devicePixelRatio : 1; | |
if(pixelRatio >= 2) { | |
return true; | |
} | |
else { | |
return false; | |
} | |
} | |
/** | |
* Method calculates the viewport size of the current browser. | |
* @return {Object} Object contains the screen's width and height | |
*/ | |
, calculateViewport: function() { | |
this.viewport = { | |
width: _$win.width() | |
, height: _$win.height() | |
}; | |
console.log(this.viewport.width + "x" + this.viewport.height); | |
return this.viewport; | |
} | |
, dataBrowser: [ | |
{ | |
string: navigator.userAgent, | |
subString: "Chrome", | |
identity: "Chrome" | |
} | |
, { string: navigator.userAgent, | |
subString: "OmniWeb", | |
versionSearch: "OmniWeb/", | |
identity: "OmniWeb" | |
} | |
, { | |
string: navigator.vendor, | |
subString: "Apple", | |
identity: "Safari", | |
versionSearch: "Version" | |
} | |
, { | |
prop: window.opera, | |
identity: "Opera", | |
versionSearch: "Version" | |
} | |
, { | |
string: navigator.vendor, | |
subString: "iCab", | |
identity: "iCab" | |
} | |
, { | |
string: navigator.vendor, | |
subString: "KDE", | |
identity: "Konqueror" | |
} | |
, { | |
string: navigator.userAgent, | |
subString: "Firefox", | |
identity: "Firefox" | |
} | |
, { | |
string: navigator.vendor, | |
subString: "Camino", | |
identity: "Camino" | |
} | |
, { // for newer Netscapes (6+) | |
string: navigator.userAgent, | |
subString: "Netscape", | |
identity: "Netscape" | |
} | |
, { | |
string: navigator.userAgent, | |
subString: "MSIE", | |
identity: "Explorer", | |
versionSearch: "MSIE" | |
} | |
, { // for older Netscapes (4-) | |
string: navigator.vendor, | |
subString: "Google", | |
identity: "Android", | |
versionSearch: "Version" | |
} | |
, { | |
string: navigator.userAgent, | |
subString: "Gecko", | |
identity: "Mozilla", | |
versionSearch: "rv" | |
} | |
, { // for older Netscapes (4-) | |
string: navigator.userAgent, | |
subString: "Mozilla", | |
identity: "Netscape", | |
versionSearch: "Mozilla" | |
} | |
] | |
, dataMobileBrowsers : [ | |
{ | |
identity: "iPad" | |
} | |
, { | |
identity: "iPhone" | |
} | |
, { | |
identity: "Android" | |
} | |
] | |
, dataOS : [ | |
{ | |
string: navigator.platform, | |
subString: "Win", | |
identity: "Windows" | |
} | |
, { | |
string: navigator.userAgent, | |
subString: "Android", | |
identity: "Android" | |
} | |
, { | |
string: navigator.platform, | |
subString: "Mac", | |
identity: "Mac" | |
} | |
, { | |
string: navigator.userAgent, | |
subString: "iPhone", | |
identity: "iPhone/iPod" | |
} | |
, { | |
string: navigator.userAgent, | |
subString: "iPad", | |
identity: "iPad" | |
} | |
, { | |
string: navigator.platform, | |
subString: "Linux", | |
identity: "Linux" | |
} | |
] | |
}; | |
environment.init(); | |
return environment; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment