public
tvandervossen / environment.js
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
File suppressed. Click to show.
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 
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('MSIE ') > -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('Version/7.') > -1) flag('ios7')
  if (ua.indexOf('Chrome/') > -1) flag('chrome')
  if (!flags.chrome && ua.indexOf('Safari/')) flag('safari')
  if (ua.indexOf('Android ') > -1) flag('android')
  if (!flags.ios && !flags.android) 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 (devicePixelRatio >= 2) flag('retina')
  if (window != window.top) flag('embedded')
  if (document.documentElement.webkitRequestFullscreen || document.fullscreenEnabled || document.mozFullScreenEnabled) 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 commented

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

tvandervossen commented

If you need one you can use the MIT.

julik commented

wow! stealing this immediately

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.