CSS get height of screen resolution

Question

I\'m having a hard time getting the height of lower screen resolution because my screen resolution is 1920x1080.

Does anyone know how to get height and width of the

Answer 1

You can bind the current height and width of the screen to css variables: var(--screen-x) and var(--screen-y) with this javascript:

var root = document.documentElement;

document.addEventListener('resize', () => {
  root.style.setProperty('--screen-x', window.screenX)
  root.style.setProperty('--screen-y', window.screenY)
})

This was directly adapted from lea verou's example in her talk on css variables here: https://leaverou.github.io/css-variables/#slide31