A Modernizr extension to detect device, device model, screen size, operating system, and browser details
Home Page: http://barisaydinoglu.github.io/Detectizr
License: MIT License
Mozilla/5.0 (iPad; CPU OS 7_1 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) CriOS/33.0.1750.21 Mobile/11D167 Safari/9537.53 (B04270E9-B13E-4776-8A73-7209A1256F2F)
thx!
While most developers know that feature detection is the best course of action, it would make sense to document actual incidents that require Detectizr.
One such issue that comes to mind is Safari 6.0 crashing if a calc() and transition style are used on the same element.
It would make sense to create an up to date wiki page with known issues that only userAgent sniffing can cope with.
When a link is clicked within the Facebook application on iOS or Android it opens it its own internal browser. It would be good to detect this because the Facebook browser doesn't support landscape orientation which some multimedia sites rely on. The browser engine is applewebkit, but the vendor name should probably be facebook.
I'll be able to supply a userAgent string shortly.
I Installed the latest Version 1.4.3. It works great, thanks for your Work!
But unfortunately in IE i got the Alert, that the Website wants to execute the "Windows Media Player Extension". When I throw away the "Modernizr.Detectizr.detect();", no message appears.
I would like to know if you planning to support Windows Edge anytime soon.
Here's the User Agent :
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240
Hi some time raven-js catch errors "Object doesn't support property or method 'javaEnabled'"
may be here https://github.com/barisaydinoglu/Detectizr/blob/master/dist/detectizr.js#L507 need add additional check?
Hello.
When testing an Amazon Kindle Fire device with Detectizr, it's reporting
that its operating sistem is "Linux". A more correct value would be
"Android".
See you it here:
http://en.wikipedia.org/wiki/Kindle_Fire#Models
http://en.wikipedia.org/wiki/Kindle_Fire_HD#Models
Please, could you fix it?
Hello again, having installed 1.4.2 I am now receiving the following error:
Uncaught TypeError: Object # has no method 'mq'
I'm running Chrome 24 (latest stable) and I'm initializing it as follows:
Modernizr.Detectizr.detect({detectPlugins:false});
I am trying to import Detectizr right after Modernizr
import Modernizr from 'modernizr';
import Detectizr from 'detectizr';
console.log('> >', Modernizr, Detectizr);
it makes an error:
Uncaught TypeError: Cannot read property 'documentElement' of undefined
If I remove Detectizr, everything is ok, Modernizr works well.
Any special advice with working with modernizr-loader or webpack?
This is more of an FYI than bug on the script.
I double checked your code and it seems to be working correctly, but for some reason Chrome 30.0.1599.101 m is returning the wrong Windows version in its user agent.
<html> class names
desktop windows windows7 chrome chrome30 webkit
User agent
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36"
Currently I have to add further detection the following ways for android, IOS, and BB...
//tracking setup
var parts = navigator.userAgent.split(/\s*[;)(]\s*/);
var osVersion = Modernizr.Detectizr.device.osVersion;
if (/^Version/.test(parts[5])) {
osVersion = parts[5].split("/")[1].split(" ")[0]; //(IOS/BB)
} else if (Modernizr.Detectizr.device.os === "android") {
osVersion = parts[3].split(" ").pop();
}
Currently trying to find a nice way to grab BB10 os from userAgent as well I have to check if windows devices work.
Opera browsers are returning as chrome (tested in OSX, multiple opera versions, windows tested with latest opera), it looks like you are parsing the UA to find the word 'opera', which is not in the opera UA, however the word 'chrome' actually is in the user agent so it returns chrome. As far as I can tell the only unique identifier to opera is the string 'opr/26.0.1656.60' (replace the numbers with the version) and really old versions contain the string 'Presto/'
The regex that works for me is /OPR/\d{2}.\d{1}.\d{4}.\d{2}|Presto// however it would be nice if we didn't have to have a separate rule from the Detectizr stuff.
http://www.chucklebreak.com/dev/
alert(Modernizr.Detectizr.device.browser + ' ' + Modernizr.Detectizr.device.model + ' ' + Modernizr.Detectizr.device.orientation + ' ' + Modernizr.Detectizr.device.os);
only OS, model and browser works. i also have no idea how to return the screen size. please expand the documentation. thanks.
Please publish this package to npm registry https://www.npmjs.org/doc/misc/npm-developers.html
I'm not sure if this issue is just happening for me or not. But I'm using Windows 7 32-bit on a dell laptop. When I test in IE9 it renders this part on the <html> tag:
tablet windows windows7 ie ie9 java acrobat flash mediaplayer silverlight landscape
If I flip compatibility mode on I get
tablet windows windows7 ie ie8 java acrobat flash mediaplayer silverlight landscape
It works correctly in all other browsers I've tested (Chrome, FF, Safari Mobile) but in IE it's receiving the wrong styles since it's reading the .tablet class.
If you need more information please let me know.
I replace my Detectizr v1.4.5 with the new version here. (by simple copy and past the code)
I get this error message.
TypeError: Modernizr.Detectizr is undefined
Modernizr.Detectizr.detect({detectScreen:false});
Be sure I placed it after modernizr.js.
Do I made something wrong?
Currently Windows 8 is being reported as "windowsnt"
Thanks for the plugin!
Do you know something about this issue? Is there something special about his device?
When I do a bower install detectizr it saves to my bower.json file as version 1.5.0 and it seems to be an older release which is missing the dist folder and some recent changes.
For BB10 smartphones, Detectizr gives device.type as "tablet". BB10 is only available on smartphones, so it should be detected as "mobile".
Hello,
I had an issue where on a Chromebook/ChromeOS the mobile class was being added to the html element. Not sure if this is intentional or not but I don't think it should be.
Thoughts?
Microsoft updated their user agent, Windows NT 6.3 is now Windows 8.1.
http://msdn.microsoft.com/en-us/library/ie/hh869301(v=vs.85).aspx
Hi! Thanks for great work. Maybe I am just retarded, but it seems the class updates doesn't run on resize? is there some configuration options to make this possible? Cheers J
In windows 8 touch laptop, device type is detecting as tablet for IE browser, but expected is desktop.
for all other browsers device type is appearing correct value as "desktop"
There is a CSS bug in Safari 6.0 for OSX that can crash the browser, but is fixed in 6.1. I can't do a feature detect on this and have to use userAgents to shim it.
It would be nice if the version numbers in Detectizr were more accurate. Perhaps by adding a minorversion and perhaps a rawversion to the output.
{
...
version: 6,
minorversion: 1,
rawversion: "6.1.2"
}
Here is a typical OSX Safari 6.1 userAgent string
Mozilla/5.0 (Macintosh; Intel Mac OS X 1084) AppleWebKit/537.46.3 (KHTML like Gecko) Version/6.1 Safari/537.46.3
And here's a list of all the variations http://myip.ms/view/comp_browsers/1134/Safari_6_1.html
to 2.7.1, while modernizr has newer versions available, which in turn may cause a slight confusion for bower. Is the 2.7 dep neccessary?
New chromium base Edge is detected as Chrome
Is there an option/alternative to detect retina screens (and competitor's equivalents)?
Hi!
raven-js catch many errors like window.opera is undefined
because some diveces dont have anything from a.userAgent||a.vendor||window.opera
I've been having issues on my iOS devices in that detectizr consistently identifies them as running 'mac' as their os
In IE11, the browserEngine attribute is blank.
However, in my userAgent attribute "trident" is clearly listed.
userAgent : mozilla/5.0 (windows nt 6.1; wow64; trident/7.0; slcc2; .net clr 2.0.50727; .net clr 3.5.30729; .net clr 3.0.30729; .net4.0c; .net4.0e; media center pc 6.0; rv:11.0) like gecko
I assume this is because it's using a WebView but it would be really nice if detectizr could tell the difference.
{
"device":{
"browser":"safari",
"browserEngine":"webkit",
"browserPlugins":[],
"browserVersion":"",
"model":"iphone",
"orientation":"",
"os":"ios",
"osVersion":"7",
"osVersionFull":"7.0.4",
"type":"mobile",
"userAgent":"mozilla/5.0 (iphone; cpu iphone os 7_0_4 like mac os x) applewebkit/537.51.1 (khtml, like gecko) crios/31.0.1650.18 mobile/11b554a safari/8536.25 (0e49bb06-60c1-4a5e-ac79-934f8a6a62b7)"
}
}
Here's a Stack Overflow answer that explains the differences. It looks like the existence of CriOS in the userAgent
http://stackoverflow.com/questions/13807810/ios-chrome-detection
Here's the userAgent of my smart TV:
Mozilla/5.0 (SMART-TV; X11; Linux i686) AppleWebKit/534.7 (KHTML, like Gecko) Version/5.0 Safari/534.7
It's currenlty identified as a Linux Computer
Hope it helps
R
Nice tool, i like it very much. I missing a version number in the .js file. (Older files provides one)
And... can you also provide a minified version?
What classes are added to the html tag for say a Samsung Galaxy S6 mobile phone using the native Samsung Internet browser?
Is it planned or is it already there?
Thanks in advance.
Hey, i've had a problem detecting flash under IE9 under Win7.
Even adobe flash was installed Modernizr.flash was false.
I've solved with this little snippet I found on stackoverflow (http://stackoverflow.com/a/3336320/2367784):
try { Modernizr.flash = Boolean(new ActiveXObject('ShockwaveFlash.ShockwaveFlash')); } catch (exception) { Modernizr.flash = ('undefined' != typeof navigator.mimeTypes['application/x-shockwave-flash']); }
The only difference should be that Detectizr test ShockwaveFlash.ShockwaveFlash.1 instead of ShockwaveFlash.ShockwaveFlash, what this .1 is? It is a bug?
64bit Chrome on Mac doesn't report this information in the user agent string, so the test causes the value to be set to '32bit'.
Maybe the test can also examine the value at window.performance.memory.jsHeapSizeLimit as described in: https://code.google.com/p/chromium/issues/detail?id=381246
Not sure if the tests are actually used (in their sparse state :P), but both useragent tests fail in Firefox.
The reason being that the userAgent property is readonly [1], per spec [2].
[1] http://mxr.mozilla.org/mozilla-central/source/dom/webidl/Navigator.webidl#45
[2] http://www.whatwg.org/specs/web-apps/current-work/#the-navigator-object
A simple fix would be to define a getter for the userAgent property that returns newUserAgent of changeUserAgent.
Further to my Windows 8 comment, it is currently reporting IE10 as "ie1"
Thanks again!
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.