webpack-bootstrap-ui-kit/src/js/main/css-screen-size.js

// browser tab visibility state detection

import Events from '../_events'
import Consts from '../_consts'

export default ((W) => {
  const NAME = '_main.css-screen-size'
  const D = document
  const BODY = D.body

  const detectCSSScreenSize = () => {
    const el = D.createElement('div')
    el.className = 'env-test'
    BODY.appendChild(el)

    const envs = [...Consts.ENVS].reverse()
    let curEnv = envs.shift()
    BODY.classList.remove(...envs)

    for (let i = 0; i < envs.length; ++i) {
      const env = envs[i]
      el.classList.add(`d-${env}-none`)

      if (W.getComputedStyle(el).display === 'none') {
        curEnv = env
        BODY.classList.add(`${curEnv}`)
        break
      }
    }

    let landscape = true
    if (W.innerWidth > W.innerHeight) {
      BODY.classList.add('landscape')
      BODY.classList.remove('portrait')
    } else {
      landscape = false

      BODY.classList.add('portrait')
      BODY.classList.remove('landscape')
    }

    console.log(
      `${NAME}: screen size detected ${curEnv} | landscape ${landscape}`
    )

    BODY.removeChild(el)

    return curEnv
  }

  W.addEventListener(`${Events.LOADED}`, detectCSSScreenSize)

  W.addEventListener(`${Events.RESIZE}`, detectCSSScreenSize)
})(window)