Here’s an example of my current web app user agent, device, and/or feature detection approach. I tend to inline this in the page header just before the stylesheet as part of the distribution build. A benefit of this approach is that detection is done early without any external dependencies. It’s also straightforward to modify or extend while you…
| env = (function() { | |
| var flags = {}, ua = navigator.userAgent, el = document.createElement('div'), video = document.createElement('video'), audio = document.createElement('audio'), root = document.documentElement, i | |
| function flag(names) { | |
| names = names.split(' ') | |
| for (i = 0; i < names.length; i++) | |
| flags[names[i]] = true | |
| } | |
| function classnames() { | |
| var names = [], name | |
| for(name in flags) if (flags.hasOwnProperty(name)) | |
| names.push(name) | |
| root.className += (root.className ? ' ' : '') + names.join(' ') | |
| } | |
| if (ua.indexOf('WebKit/') > -1) flag('webkit') | |
| if (ua.indexOf(' Trident/') > -1) flag('msie') | |
| if (flags.msie) { | |
| if (parseInt(ua.substr(ua.indexOf('MSIE ') + 5, 2), 10) < 9) flag('msielt9') | |
| if (parseInt(ua.substr(ua.indexOf('MSIE ') + 5, 2), 10) < 10) flag('msielt10') | |
| } | |
| if (ua.indexOf('Firefox') > -1) flag('firefox') | |
| if (ua.indexOf('(iPad') > -1) flag('ios ipad') | |
| if (ua.indexOf('(iPhone') > -1 || ua.indexOf('(iPod') > -1) flag('ios iphone') | |
| if (flags.ios && ua.indexOf('OS 7_') > -1) flag('ios7') | |
| if (ua.indexOf('Chrome/') > -1 || ua.indexOf('CriOS/') > -1) flag('chrome') | |
| if (!flags.chrome && ua.indexOf('Safari/') > -1) flag('safari') | |
| if (ua.indexOf('Android ') > -1) flag('android') | |
| if (ua.indexOf('Windows Phone ') > -1) flag('winphone') | |
| if (!flags.ios && !flags.android&& !flags.winphone) flag('desktop') | |
| el.setAttribute('ontouchstart', 'return;') | |
| if (typeof el.ontouchstart === 'function') flag('touch') | |
| if (navigator.msPointerEnabled && navigator.msMaxTouchPoints > 1) flag('touch') | |
| if (navigator.standalone) flag('standalone') | |
| if (navigator.devicePixelRatio && navigator.devicePixelRatio >= 2) flag('retina') | |
| if (window != window.top) flag('embedded') | |
| if (document.documentElement.webkitRequestFullscreen || document.fullscreenEnabled || document.mozFullScreenEnabled || document.documentElement.msRequestFullscreen) flag('fullscreen') | |
| if (!!(video.canPlayType && video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''))) flag('can_play_h264') | |
| if (!!(audio.canPlayType && audio.canPlayType('audio/mpeg;').replace(/no/, ''))) flag('can_play_mp3') | |
| if (screen.width > 1280) flag('hd') | |
| if (screen.width < 768) flag('narrow') | |
| classnames() | |
| return flags | |
| })() |
This comment has been minimized.
This comment has been minimized.
|
If you need one you can use the MIT. |
This comment has been minimized.
This comment has been minimized.
|
wow! stealing this immediately |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
This is fantastic -- what's the license on this?