Detect Browsers And Operating Systems Using jQuery

Detect Browser using jQuery

It is very easy to detect the browser & OS using jquery. This code snippet will give you the browser.

Let me provide you an example:  

Sometimes issues are generated in particular browsers like:

  1. OpenSans font face displayed extra bold in Mac OS.
  2. Default 'line-height' values are not same in all browsers all time.
  3. Box-shadow is not working proper in safari, user can add particular class name like 'mac-os' using below JS code and solved their issues

Add below jQuery code in js file which would work flawlessly for respective browser and would NOT impact any other browsers. 

  /**
   * Detect OS & browsers
   */
  /* Add class for mac */
  if(navigator.appVersion.indexOf("Win")!=-1) {
    jQuery('body').addClass('window-os');
  }
  if(navigator.platform.toUpperCase().indexOf('MAC')>=0) {
    jQuery('body').addClass('mac-os');
  }
  if(navigator.appVersion.indexOf("Linux")!=-1) {
    jQuery('body').addClass('linux-os');
  }
  /* Add class for all ie version */
  var trident = !!navigator.userAgent.match(/Trident\/7.0/);
  var net = !!navigator.userAgent.match(/.NET4.0E/);
  var IE11 = trident && net;
  var IEold = ( navigator.userAgent.match(/MSIE/i) ? true : false );
  if(IE11 || IEold){
    jQuery('body').addClass('ie');
  }
  var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf('safari') != -1) {
    if (ua.indexOf('chrome') > -1) {
      jQuery('body').addClass('chrome');
    } else {
      jQuery('body').addClass('safari');
    }
  }
  var FF = !(window.mozInnerScreenX == null);
  if(FF) {
    jQuery('body').addClass('fire-fox'); 
  } else { 
    //jQuery('body').addClass('not-fire-fox');
  }
  /* End */

Feel free to post your more queries or feedback for the same also connect with us regarding Web Design Services. Readily available to address your concerns.