Back to Code Bytes
1 min read
Screen width/height CSS-only

Description

Source: Get the screen width & height without JavaScript

Code Byte

@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  */
}

body:before {
  content: counter(w) "x" counter(h);
  counter-reset: h var(--h) w var(--w);
  font-size: 50px;
  font-family: system-ui,sans-serif;
  font-weight: 900;
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
}

Example

Screen Width and Height: