full.html

<style>
#big {
	font-size: 25vw;
	font-family: 'Helvetica Neue', sans-serif;
	font-weight: bold;
}
#big:-webkit-full-screen {
	width: 100%;
	height: 100%;
	margin: auto;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
<input id="text" type="text" size="40">
<button onclick="full( document.getElementById('text').value );">Set focus topic →</button>
<div id="big" onclick="unfull();">
	Hola
</div>
<script>
function full( text ) {
	document.getElementById( 'big' ).innerHTML = text;
	document.getElementById( 'big' ).style.fontSize = ( 150 / text.length ) + 'vw';
	document.getElementById( 'big' ).webkitRequestFullscreen();
}
function unfull() {
	document.webkitExitFullscreen();
	document.getElementById( 'text' ).focus();
}
document.getElementById( 'text' ).focus();
</script>