public
Last active

My current web app environment / user agent / device / feature detection code. 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 when needed. On top of that, it gives you convenient access to the same flags from Javascript using a single env object as well as from CSS using identical class names on the html root element.IMHO code as trivial as this shouldn’t need a license for you to be able to use it, but you can assume the MIT if you feel you need to. Make sure to test and modify as needed.

  • Download Gist
environment.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
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 (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?

If you need one you can use the MIT.

wow! stealing this immediately

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.