JSFiddle - React, Tailwind, and code Playground

by Michal Vodicka

HTML

<h1>
Im resizable iframe and I know my size!
</h1>
<p>
and my size is: <span id="size"></span>
</p>

CSS

body {
  min-width: 100%;
  min-height: 100%;
  background-color: #FDD;
  border: 0;
  margin: 0;
  padding: 0;
}

JavaScript

var sizeEl = document.getElementById("size");

function getMySize() {
  // return [document.body.clientWidth, document.body.clientHeight];
  return [window.innerWidth, window.innerHeight];
}

function writeMySizeDown() {
	var size = getMySize();
  sizeEl.innerHTML = size[0] + "x" + size[1];
}

writeMySizeDown();

window.addEventListener("resize", writeMySizeDown);