JSFiddle - React, Tailwind, and code Playground

by ttquang1063750

HTML

<div class="box">
  <span id="scale">Scale the window</span>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.box {
  min-height: 60px;
  text-align: center;
  vertical-align: bottom;
}

#scale {
  display: inline-block;
  transform-origin: 50% 0;
  transform: translate3d( 0, 0, 0);
}

JavaScript

function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
};

var myScaleFunction = debounce(function() {
	scaleText();
}, 250);

myScaleFunction();

function scaleText() {
  const container = document.body.offsetWidth - 10;
  const div = document.getElementById('scale');
  const w = div.offsetWidth;
  const h = div.offsetHeight;
  const t = w > h ? w : h;

  div.style.transform = `scale(${container / t})`;
}

window.addEventListener('resize', myScaleFunction);
/*  window.onload = function() {
  const container = document.body.offsetWidth - 10;
  const div = document.getElementById('scale');
  const w = div.offsetWidth;
  const h = div.offsetHeight;
  const t = w > h ? w : h;
 
  div.style.transform = `scale(${container / t})`;
 } */