ludviglindblom/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;
}

#full_screen_info {
  background: #ff0;
  font-weight: bold;
}

</style>
</head>
<body>
<p>
  Detects if window is full-screen, by<br />
  comparing window vs. screen size.
</p>
<p>
  Window <span id="full_screen_info"></span> full-screen.
</p>
<p>
  Screen width = <span id="screen_width_info"></span><br />
  Screen height = <span id="screen_height_info"></span><br />
  Window width = <span id="window_width_info"></span><br />
  Window height = <span id="window_height_info"></span>
</p>
<script>
(function(w, s, d) {
  var full_screen_info = d.getElementById('full_screen_info');
  var screen_width_info = d.getElementById('screen_width_info');
  var screen_height_info = d.getElementById('screen_height_info');
  var window_width_info = d.getElementById('window_width_info');
  var window_height_info = d.getElementById('window_height_info');

  function check_max() {
    var width = w.innerWidth || d.documentElement.clientWidth;
    var height = w.outerHeight || d.documentElement.clientHeight;
    var s_width = s.width;
    var s_height = s.height;

    if (width === s_width && height === s_height) {
      full_screen_info.innerHTML = 'is';
    }
    else {
      full_screen_info.innerHTML = 'not';
    }

    screen_width_info.innerHTML = s_width;
    screen_height_info.innerHTML = s_height;
    window_width_info.innerHTML = width;
    window_height_info.innerHTML = height;
  }

  check_max();

  if (w.addEventListener) {
    w.addEventListener('resize', check_max, false);
  }
  else if (w.attachEvent) {
    w.attachEvent('onresize', check_max);
  }
  else {
    w.onresize = check_max;
  }
})(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;
	}

	#full_screen_info {
	background: #ff0;
	font-weight: bold;
	}

	</style>
	</head>
	<body>
	<p>
	Detects if window is full-screen, by<br />
	comparing window vs. screen size.
	</p>
	<p>
	Window <span id="full_screen_info"></span> full-screen.
	</p>
	<p>
	Screen width = <span id="screen_width_info"></span><br />
	Screen height = <span id="screen_height_info"></span><br />
	Window width = <span id="window_width_info"></span><br />
	Window height = <span id="window_height_info"></span>
	</p>
	<script>
	(function(w, s, d) {
	var full_screen_info = d.getElementById('full_screen_info');
	var screen_width_info = d.getElementById('screen_width_info');
	var screen_height_info = d.getElementById('screen_height_info');
	var window_width_info = d.getElementById('window_width_info');
	var window_height_info = d.getElementById('window_height_info');

	function check_max() {
	var width = w.innerWidth \|\| d.documentElement.clientWidth;
	var height = w.outerHeight \|\| d.documentElement.clientHeight;
	var s_width = s.width;
	var s_height = s.height;

	if (width === s_width && height === s_height) {
	full_screen_info.innerHTML = 'is';
	}
	else {
	full_screen_info.innerHTML = 'not';
	}

	screen_width_info.innerHTML = s_width;
	screen_height_info.innerHTML = s_height;
	window_width_info.innerHTML = width;
	window_height_info.innerHTML = height;
	}

	check_max();

	if (w.addEventListener) {
	w.addEventListener('resize', check_max, false);
	}
	else if (w.attachEvent) {
	w.attachEvent('onresize', check_max);
	}
	else {
	w.onresize = check_max;
	}
	})(this, this.screen, this.document);
	</script>
	</body>
	</html>