CSS Tip

Get the screen width & height without JavaScript

Get the screen width and height as pixel values using a few lines of CSS.

@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw; 
}
@property --_h {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh; 
}
:root {
  --w: tan(atan2(var(--_w),1px)); /* screen width */
  --h: tan(atan2(var(--_h),1px)); /* screen height*/
  /* The result is an integer without unit  */
}

Resize the below demo to see how the values update in real-time:

See the Pen Screen width/Screen height (CSS-only) by Temani Afif (@t_afif) on CodePen.

More detail: dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j

You can also get the width/height of any element using a different method

More CSS Tips