Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
})()
@EvanHahn

This comment has been minimized.

Copy link

@EvanHahn EvanHahn commented Mar 11, 2013

This is fantastic -- what's the license on this?

@tvandervossen

This comment has been minimized.

Copy link
Owner Author

@tvandervossen tvandervossen commented Jun 13, 2013

If you need one you can use the MIT.

@julik

This comment has been minimized.

Copy link

@julik julik commented Sep 30, 2013

wow! stealing this immediately

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.