back

Browser detection

luge includes Bowser to detect browser name and version. The Bowser instance is globally available on window.browser to do your own checks.

CSS classes

The following CSS classes are added to the html element depending on the user’s browser:

  • is-mobilewhen the user uses a mobile ;
  • is-tablet when the user uses a tablet ;
  • is-handheld when the user uses either a mobile or a tablet ;
  • is-desktop when the user uses a computer ;
  • is-safari when the user uses Safari (as it turns out that Safari is the new IE…), with an alternative is-safari--13 class that contains the version number.

Disable plugins

Browser detection can be used to disable plugins depending on the user’s browser. To do so, use the plugin key (lottie, parallax, preloader, reveal, scroll, smooth, sticky) and set the disabled property.

The disabled value can be a String to target only one browser, OS or platform using Bowser is method (available constants can be found here)

luge.settings({
  smooth: {
    disabled: 'mobile'
  }
})

An Object, using Bowser satisfies method:

luge.settings({
  smooth: {
    disabled: {safari: '<=12'}
  }
})

Or an Array of both for more complex targeting:

luge.settings({
  smooth: {
    disabled: ['mobile', {safari: '<=12'}]
  }
})

The default setting is:

luge.settings({
  smooth: {
    disabled: ['tablet', 'mobile', { safari: '<=12' }]
  },
  sticky: {
    disabled: ['tablet', 'mobile']
  }
})