Create a gist now

Instantly share code, notes, and snippets.

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 is fantastic -- what's the license on this?

@tvandervossen

If you need one you can use the MIT.

@julik

wow! stealing this immediately

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment