Create a gist now

Instantly share code, notes, and snippets.

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
})()

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

Owner

If you need one you can use the MIT.

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