Tested from Lumia 930.

{{deviceDetector}} outputs:

{  
  "raw":{  
     "userAgent":"Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 930) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537",
     "os":{  
        "windows":false,
        "mac":true,
        "ios":true,
        "android":true,
        "linux":false,
        "unix":false,
        "firefoxos":false,
        "windows-phone":true,
        "ps4":false,
        "vita":false,
        "unknown":false
     },
     "browser":{  
        "chrome":false,
        "firefox":false,
        "safari":true,
        "opera":false,
        "ie":true,
        "ps4":false,
        "vita":false,
        "unknown":false
     },
     "device":{  
        "android":true,
        "ipad":false,
        "iphone":true,
        "ipod":false,
        "blackberry":false,
        "firefoxos":false,
        "windows-phone":true,
        "ps4":false,
        "vita":false,
        "unknown":false
     },
     "os_version":{  
        "windows-3-11":false,
        "windows-95":false,
        "windows-me":false,
        "windows-98":false,
        "windows-ce":false,
        "windows-2000":false,
        "windows-xp":false,
        "windows-server-2003":false,
        "windows-vista":false,
        "windows-7":false,
        "windows-8-1":false,
        "windows-8":false,
        "windows-nt-4-0":false,
        "unknown":false
     }
  },
  "os":"ios",
  "browser":"safari",
  "device":"android",
  "os_version":"unknown",
  "browser_version":"0"
}

I'm going to work on a PR in a bit, on an initial glance, looks like the string like iPhone... in raw string might be messing with the regex. (I could be completely wrong though)

Would be great to have a similar NPM Package.

Hi! Great module, thanks for the work so far.

Would it be possible to include "Browser Versions" and/or possibly "OS Versions"? Here is a service we currently use in angular, all be it, not as refined as yours:

'use strict';

angular.module('my-services').factory('app_services_browser',
    function() {
        return {
            information: function() {
                var unknown = '-';
                var width = null;
                var height = null;

                // Screen
                var screenSize = '';
                if (window.screen.width) {
                    width = (window.screen.width) ? window.screen.width : '';
                    height = (window.screen.height) ? window.screen.height : '';
                    screenSize += '' + width + " x " + height;
                }

                // Browser
                var nVer = navigator.appVersion;
                var nAgt = navigator.userAgent;
                var browser = navigator.appName;
                var version = '' + parseFloat(navigator.appVersion);
                var majorVersion = parseInt(navigator.appVersion, 10);
                var nameOffset, verOffset, ix;


                if ((verOffset = nAgt.indexOf('Opera')) != -1) {
                    browser = 'Opera';
                    version = nAgt.substring(verOffset + 6);
                    if ((verOffset = nAgt.indexOf('Version')) != -1) {
                        version = nAgt.substring(verOffset + 8);
                    }
                }
                else if ((verOffset = nAgt.indexOf('MSIE')) != -1) {
                    browser = 'Microsoft Internet Explorer';
                    version = nAgt.substring(verOffset + 5);
                }
                else if ((verOffset = nAgt.indexOf('Chrome')) != -1) {
                    browser = 'Chrome';
                    version = nAgt.substring(verOffset + 7);
                }
                else if ((verOffset = nAgt.indexOf('Safari')) != -1) {
                    browser = 'Safari';
                    version = nAgt.substring(verOffset + 7);
                    if ((verOffset = nAgt.indexOf('Version')) != -1) {
                        version = nAgt.substring(verOffset + 8);
                    }
                }
                else if ((verOffset = nAgt.indexOf('Firefox')) != -1) {
                    browser = 'Firefox';
                    version = nAgt.substring(verOffset + 8);
                }
                else if (nAgt.indexOf('Trident/') != -1) {
                    browser = 'Microsoft Internet Explorer';
                    version = nAgt.substring(nAgt.indexOf('rv:') + 3);
                }
                else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) {
                    browser = nAgt.substring(nameOffset, verOffset);
                    version = nAgt.substring(verOffset + 1);
                    if (browser.toLowerCase() == browser.toUpperCase()) {
                        browser = navigator.appName;
                    }
                }

                // Trim the version string
                if ((ix = version.indexOf(';')) != -1) {
                    version = version.substring(0, ix);
                }

                if ((ix = version.indexOf(' ')) != -1) {
                    version = version.substring(0, ix);
                }

                if ((ix = version.indexOf(')')) != -1) {
                    version = version.substring(0, ix);
                }

                majorVersion = parseInt('' + version, 10);
                if (isNaN(majorVersion)) {
                    version = '' + parseFloat(navigator.appVersion);
                    majorVersion = parseInt(navigator.appVersion, 10);
                }

                // mobile version
                var mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer);

                // cookie
                var cookieEnabled = (navigator.cookieEnabled) ? true : false;

                if (typeof navigator.cookieEnabled == 'undefined' && !cookieEnabled) {
                    document.cookie = 'testcookie';
                    cookieEnabled = (document.cookie.indexOf('testcookie') != -1) ? true : false;
                }

                // system
                var os = unknown;
                var clientStrings = [
                    {s: 'Windows 3.11', r: /Win16/},
                    {s: 'Windows 95', r: /(Windows 95|Win95|Windows_95)/},
                    {s: 'Windows ME', r: /(Win 9x 4.90|Windows ME)/},
                    {s: 'Windows 98', r: /(Windows 98|Win98)/},
                    {s: 'Windows CE', r: /Windows CE/},
                    {s: 'Windows 2000', r: /(Windows NT 5.0|Windows 2000)/},
                    {s: 'Windows XP', r: /(Windows NT 5.1|Windows XP)/},
                    {s: 'Windows Server 2003', r: /Windows NT 5.2/},
                    {s: 'Windows Vista', r: /Windows NT 6.0/},
                    {s: 'Windows 7', r: /(Windows 7|Windows NT 6.1)/},
                    {s: 'Windows 8.1', r: /(Windows 8.1|Windows NT 6.3)/},
                    {s: 'Windows 8', r: /(Windows 8|Windows NT 6.2)/},
                    {s: 'Windows NT 4.0', r: /(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/},
                    {s: 'Windows ME', r: /Windows ME/},
                    {s: 'Android', r: /Android/},
                    {s: 'Open BSD', r: /OpenBSD/},
                    {s: 'Sun OS', r: /SunOS/},
                    {s: 'Linux', r: /(Linux|X11)/},
                    {s: 'iOS', r: /(iPhone|iPad|iPod)/},
                    {s: 'Mac OS X', r: /Mac OS X/},
                    {s: 'Mac OS', r: /(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/},
                    {s: 'QNX', r: /QNX/},
                    {s: 'UNIX', r: /UNIX/},
                    {s: 'BeOS', r: /BeOS/},
                    {s: 'OS/2', r: /OS\/2/},
                    {s: 'Search Bot', r: /(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\/Teoma|ia_archiver)/}
                ];

                for (var id in clientStrings) {
                    var cs = clientStrings[id];
                    if (cs.r.test(nAgt)) {
                        os = cs.s;
                        break;
                    }
                }

                var osVersion = unknown;

                if (/Windows/.test(os)) {
                    osVersion = /Windows (.*)/.exec(os)[1];
                    os = 'Windows';
                }

                switch (os) {
                    case 'Mac OS X':
                        var result = /Mac OS X (10[\.\_\d]+)/.exec(nAgt);
                        osVersion = (result !== null ? result[1] : '');
                        break;

                    case 'Android':
                        osVersion = /Android ([\.\_\d]+)/.exec(nAgt)[1];
                        break;

                    case 'iOS':
                        osVersion = /OS (\d+)_(\d+)_?(\d+)?/.exec(nVer);
                        osVersion = osVersion[1] + '.' + osVersion[2] + '.' + (osVersion[3] | 0);
                        break;
                }

                return {
                    screen: screenSize,
                    browser: browser,
                    browserVersion: version,
                    mobile: mobile,
                    os: os,
                    osVersion: osVersion,
                    cookies: cookieEnabled
                };
            }
        };
    }
);

The code originally came from this SO post http://stackoverflow.com/questions/11219582/how-to-detect-my-browser-version-and-operating-system-using-javascript

Cheers
Ben

When I try to install the 3.0.1 version, bower prints "mismatch Version declared in the json (2.0.4) is different than the resolved one (3.0.1)", and it installs the 2.0.4 version.

How can I install the latest version using bower?

Thanks in advance!

Hi,

I needed some time to find out, that the re-tree library is actually a needed dependency for the deviceDetector to work. Without it, it does not load as a Provider.

It should be added in the readme and the package.json as a dependency.

Please update to version 1.1.1

Thanks.

IE11 has 'Trient' instead of 'MSIE' in navigator.userAgent string.
so I want to merge this PR
#20

BUT I can't fixed BROWSER_VERSIONS_RE_MAP when Brower IE Trient version.

Could you check is also?

Hello, it will be really nice if the readme could include some example of usage, as well as some typical "result" that can be expected

and also state: which kind of browser does it detect (only the firefox/ie/chrome or also some "uncommon" ones like konqueror etc. ?)
what happens when it fails to detect etc.

Thanks, it would help a lot people to decide whether or not to use your module

Is there any chance to detect messenger browser?
userAgent:

"userAgent":"Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13B143 [FBAN/MessengerForiOS;FBAV/48.0.0.20.47;FBBV/17291106;FBDV/iPad2,5;FBMD/iPad;FBSN/iPhone OS;FBSV/9.1;FBSS/1; FBCR/;FBID/tablet;FBLC/cs_CZ;FBOP/1]"

Release v1.1.4 breaks backwards compatibility because people now needs to inject re-tree.js as well.

So if people had the following in their bower.json, suddenly it'll just break on next install:

"dependencies": {
  "ng-device-detector": "~1.1.3"
}

See Semantic Versioning for more info.

Thank you for sharing this, just what I was looking for. Just an FYI you appear to not be in the bower directory.

The list of TVS User Agent
https://udger.com/resources/ua-list/device-detail?device=Smart%20TV

Hi , i have downloaded the
"re-tree": "0.0.2",
"ng-device-detector": "3.0.1" through package.json . They get successfully downloaded into node_modules directory .
But now when the same module is loaded included in my module as a dependency like below :
var myApp = angular.module('myApp', [ require('ng-admin'),'base64','ngCookies', 'ngStorage', 'ng.deviceDetector']);

i get below error :
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ng.deviceDetector due to:
Error: [$injector:nomod] Module 'ng.deviceDetector' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

In index.html page, the modules are also loaded properly:
<script type="text/javascript" src="vendorjs/re-tree/re-tree.js" charset="utf-8"></script>
<script type="text/javascript" src="vendorjs/ng-device-detector/ng-device-detector.js" charset="utf-8"></script>

Could you please help me here ?

Where is it? i can't get this module work without it...

Hi,

I've seen that this module is available at cdnjs, nevertheless the re-tree module, which is a dependency, can not be found in any CDN.
Can you push also re-tree to a CDN in order that we can load and use both modules via CDN?

Best regards,
José Gonçalves

User agent:
Mozilla/5.0 (X11; CrOS x86_64 4731.85.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
is from Chrome OS (the one prebundled in Chromebooks), so the operating system is detected as unknown.

From this part CrOS x86_64 it can be extracted that the operating system is Chrome OS. The browser is as expected Chrome.

More Chrome OS user agents here: http://www.webapps-online.com/online-tools/user-agent-strings/dv/operatingsystem52026/chrome-os

I am testing this lib with chrome, if the device set to BlackBerry PlayBook (screen resolution 600 * 1024).

isDesktop() return true
isMobile() return false
isTablet() return false

get any idea why is that?

and get the same result for Nokia N9

This project seems active, while searching for the angular browser detection.

I don't have Windows mobile though. Found this from other angular based user agent detection: https://github.com/angular-adaptive/adaptive-detection/blob/master/src/angular-adaptive-detection.js thought will create an issue.

When I opened with ng-device-detector in chrome and list out all the things
it shows that safari value also sets true..

The last release in npm (https://www.npmjs.com/package/ng-device-detector) is 4.0.0, and on github is 4.0.2

workarround:
npm install --save https://github.com/srfrnk/ng-device-detector#v4.0.2

"Chrome" is detected correctly on iOS now, but the version is not correctly identified. The current user agent string is Mozilla/5.0 (iPhone; CPU iPhone OS 9_2 like Mac OS X) AppleWebKit/601.1 (KHTML, like Gecko) CriOS/47.0.2526.107 Mobile/13C75 Safari/601.1.46, the version returned is then 0. It should return version 47.0.2526.107.

I want to convert to rails-assets

https://rails-assets.org/components

However bower.json is missing version, please add one.

Thanks.

I think it means tags

There should be a space in-between "Mac OS", which is causing it to have a class of "os-undefined".

ie. os:{
mac:/\bMac OS\b/.test(ua),
},

instead of

os:{
mac:/\bMacOS\b/.test(ua),
},

HI. I just replied that PR is merged.
but I can't install re-tree module by bower install command because bower repository doesn't apply it

plz check this it~

thanks

deviceDetector return incorrect browser for UC Browser and Opera browser, it returns Chrome.

I've tried adding device-detector in various places include the tag. Not seeing any change in the source when I do this. Am I missing something?

Otherwise, thanks for an awesome lib!

I've added checking IE11 Trient version, but when I bower install, previous version is downloaded.
I think you need to clear bower cache forcely or bower version up.

Could you check this issue?

My Pixel is showing up as a mobile phone essentially, it should be considered a desktop.

browser: "chrome"
browser_version: "46.0.2490.52"
device: "chrome-book"
isDesktop: false
isMobile: true
isTablet: true
os: "chrome-os"
os_version: "unknown"

Firefox 5.0 on iPad Air 2 is detected as "Safari".

The raw UA is:

Mozilla/5.0 (iPad; CPU OS 9_3_4 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) FxiOS/5.0 Mobile/13G35 Safari/601.1.46

Although Windows 10 is not officially released there are preview builds with the new user agent:

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0

and for Windows Phone:

Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; DEVICE INFO) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Mobile Safari/537.36 Edge/12.0

You can simply detect them with Windows NT 10.0 and Windows Phone 10.0

Here're more details: https://msdn.microsoft.com/en-us/library/hh869301%28v=vs.85%29.aspx

Getting the following error in the latest version.

Error: [$injector:modulerr] Failed to instantiate module ng.deviceDetector due to:
Error: [$injector:modulerr] Failed to instantiate module reTree due to:
Error: [$injector:nomod] Module 'reTree' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Last version that was working for me was 1.1.2.
Does the new version require including reTree myself, on top of ng-device-detector.min.js?

It would be very convenient to have isMobile() isTablet() and isDesktop() methods.

It seems deviceDetector.browser_version in Chrome + iPad always returns "0",´

Chrome 49.0.2623.73
iOS 9.2.1

Seems that Edge isn't detected and just returns browser-unknown. Not quite sure how we should be detecting it as the user-agent is a little bare. I don't think we need "browser-edge", since they just renamed IE and then marketed it as a brand new product... nothing changed in regards to support unless anyone can prove me wrong

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)

Can we differ that devices somehow? In examples I've seen tablets don't have word Mobile in navigator.

There are ECMAScript 5 features used (e.g. Object's "keys" and "reduce" methods), so this module doesn't work in IE8 ;)

I know that Opera from version 15 is practically a Chrome clone, so it is detected as Chrome. But I think it would be nice if it is detected as Opera and the its right version.

Thanks for putting this together. Pretty handy. Here's a potential improvement.

My UserAgent string is: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36"

And here's what deviceDetector finds:
browser: "chrome", browser_version: "49.0.2623.87", os: "mac", os_version: "mac-os-x-11", device: "unknown"

Really, the OS should be "OSX" and the device should be "mac", instead of having an "unknown" device.

Hi,
I have problems with the isTablet() method, it doesn't detect some tablets (like my Nexus 7) like a tablet, only as a mobile.

Hi, great module. I used in my web app and work excelent. But, i want compilate my webapp with Ionic to make an app. And i want to detect if the aplication is launcher via App o via the browser of the phone. Which variable i can used to detect this? Is possible detect this?

I create a module with ng-device-detector dependency, and prepare a unit test to verify the module. But, I observed the unit test can not start properly.

 // viewModule.ts
var myApp = angular.module('viewModule', [ 'datatables', 'ng.deviceDetector', 'data-service']);
// test-case
describe('TestViewer', function (){
    beforeEach(module('datatables'));
    beforeEach(module('ng.deviceDetector'));
    beforeEach(module('data-service));

    //it-test-logic
}

As I start the unit test, it returns 'TypeError: $controller is not a function', However, when I delete ' ng.deviceDetector' dependency, the test starts normal.

 var myApp = angular.module('viewModule', [ 'datatables',  'data-service']);
describe('TestViewer', function (){
    beforeEach(module('datatables'));
    beforeEach(module('data-service));    
    //it-test-logic
}

The "ng-device-detector": "4.0.3" is already included in package.json - 'devDependencies' and 'dependencies' setting.

Do you know what is the missing piece to cause this problem. Your advice is appreciated.
Many thanks.

"ng.deviceDetector" can not be found when injecting it to my application.

I have tested this on both 1.4.4 and 1.4.7.

I have not tried any other versions.

Would it be possible to extract the logic populating deviceInfo into a re-usable service so that the developper is able to get information from other user agents then the one returned by $window.navigator.userAgent?

My use case is a profile page with a list of open sessions. Each open session has a UA, but I'd like to replace it with more user friendly icons.

Example of the code I'd love:

<tr ng-repeat="(i, session) in sessions track by session.id">
    <!-- ....... -->
    <td><span class="device-icon" device-detector="session.userAgent" tooltip="session.userAgent"></span></td>
    <!-- ....... -->
</tr>

That way I could style .device-icon.os-* and .device-icon.browser-*.

Hi, it's me again. I implement the change, and it works fine in some cases, when i enter via app/cordova. When the Browser is Safari, the deviceBrowser show me the cordova string, but when the Browser is Chrome, show the chrome string.

"Chrome" on iPad 2 is detected as "Safari"

Hello,
I'm trying to inject the deviceDetector in a config section like so:

angular.module('core', ['devideDetector']).config(
        function (devideDetector) {
            console.log(devideDetector);
        }
);

But it throws me an error, can you help me?
Thanks