tvandervossen / environment.js
Last active

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

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 work on your app. 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. MIT licensed for people who insist on that kind of thing. PLEASE NOTE: THIS IS NOT INTENDED FOR USE AS-IS, THIS IS INTENDED AS AN EXAMPLE FOR YOU TO MODIFY ACCORDING TO YOUR PROJECT’S NEEDS. REMOVE WHAT YOU DON’T USE. ALWAYS TEST TO MAKE SURE THINGS WORK AS YOU WANT THEM TO.

View environment.js
Raw
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 42 43 44 
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 commented

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

Owner
tvandervossen commented

If you need one you can use the MIT.

julik commented

wow! stealing this immediately

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.