Sandstedt/detect_full_screen.html

## detect_full_screen.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Detect Full-Screen</title>
<style>

* {
  font-family: sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
}

#full_screen_info {
  background: #ff0;
  font-weight: bold;
}
html, body {
  height: 100%;
}
body {
  transition: background 1s;
  padding: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 2em;
  background: #e57575;
  color: white;
}
.fullscreen {
  background: #76e2bb;
}

</style>
</head>
<body>
<p>
  Detects if window is full-screen, by<br />
  comparing window vs. screen size.
</p>
<p>
  Original code viewable <a href="https://gist.github.com/978838">here</a>.
</p>
<script>
/* Check if fullscreen */
// Credit: @nathansmith, https://gist.github.com/nathansmith/978838#file-detect_full_screen-html

// Global var to check if page is fullscreen
var isFullscreen = false;

(function(w, s, d) {
  var timer;

  function detect_full_screen() {
    // This clearInterval is for IE.
    clearInterval(timer);

    var d_width = d.documentElement.clientWidth || 0;
    var d_height = d.documentElement.clientHeight || 0;
    var w_width = w.innerWidth || 0; /* Inner, instead of outer, for IE9 */
    var w_height = w.outerHeight || 0;
    var s_width = s.width || 0;
    var s_height = s.height || 0;

    if ((w_width === s_width && w_height === s_height) || (d_width === s_width && d_height === s_height)) {
      document.body.classList.add('fullscreen');
      isFullscreen = true;
    }
    else {
      document.body.classList.remove('fullscreen');
      isFullscreen = false;
    }

    console.log( 'Is the page fullscreen?', isFullscreen );

  }

  detect_full_screen();

  function bridge() {
    // Clear as window resize fires.
    clearInterval(timer);
    timer = setInterval(detect_full_screen, 100);
  }

  if (w.addEventListener) {
    w.addEventListener('resize', bridge, false);
  }
  else if (w.attachEvent) {
    w.attachEvent('onresize', bridge);
  }
  else {
    w.onresize = bridge;
  }
})(this, this.screen, this.document);

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Detect Full-Screen</title>
	<style>

	* {
	font-family: sans-serif;
	line-height: 1.5;
	box-sizing: border-box;
	}

	#full_screen_info {
	background: #ff0;
	font-weight: bold;
	}
	html, body {
	height: 100%;
	}
	body {
	transition: background 1s;
	padding: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 2em;
	background: #e57575;
	color: white;
	}
	.fullscreen {
	background: #76e2bb;
	}

	</style>
	</head>
	<body>
	<p>
	Detects if window is full-screen, by<br />
	comparing window vs. screen size.
	</p>
	<p>
	Original code viewable <a href="https://gist.github.com/978838">here</a>.
	</p>
	<script>
	/* Check if fullscreen */
	// Credit: @nathansmith, https://gist.github.com/nathansmith/978838#file-detect_full_screen-html

	// Global var to check if page is fullscreen
	var isFullscreen = false;

	(function(w, s, d) {
	var timer;

	function detect_full_screen() {
	// This clearInterval is for IE.
	clearInterval(timer);

	var d_width = d.documentElement.clientWidth \|\| 0;
	var d_height = d.documentElement.clientHeight \|\| 0;
	var w_width = w.innerWidth \|\| 0; /* Inner, instead of outer, for IE9 */
	var w_height = w.outerHeight \|\| 0;
	var s_width = s.width \|\| 0;
	var s_height = s.height \|\| 0;

	if ((w_width === s_width && w_height === s_height) \|\| (d_width === s_width && d_height === s_height)) {
	document.body.classList.add('fullscreen');
	isFullscreen = true;
	}
	else {
	document.body.classList.remove('fullscreen');
	isFullscreen = false;
	}

	console.log( 'Is the page fullscreen?', isFullscreen );

	}

	detect_full_screen();

	function bridge() {
	// Clear as window resize fires.
	clearInterval(timer);
	timer = setInterval(detect_full_screen, 100);
	}

	if (w.addEventListener) {
	w.addEventListener('resize', bridge, false);
	}
	else if (w.attachEvent) {
	w.attachEvent('onresize', bridge);
	}
	else {
	w.onresize = bridge;
	}
	})(this, this.screen, this.document);

	</script>
	</body>
	</html>