viewportSize

viewportSize returns the current viewport size as a breakpoint key. It uses window.matchMedia under the hood and returns one of:

Key	Range
xs	up to 767px
sm	768px – 900px
md	901px – 1200px
lg	1201px – 1439px
xl	1440px and up

This lets you branch your JavaScript on breakpoint without hard-coding matchMedia queries everywhere. It reflects the viewport at the moment it's called, so re-check it inside a (debounced) resize handler if you need to respond to changes.

Usage examples

Basic

2.0 Build

window.BAO.utils.viewportSize() // 'md'

1.0 Build

viewportSize() // 'md'

Branching behaviour by breakpoint

2.0 Build

const size = window.BAO.utils.viewportSize()

if (size === 'xs' || size === 'sm') {
  // Mobile-only behaviour
}

1.0 Build

const size = viewportSize()

if (size === 'xs' || size === 'sm') {
  // Mobile-only behaviour
}