Open page full screen (JavaScript)

Viewing a page in full screen mode, using JavaScript and requestFullscreen() method. Then exiting back to normal mode:

HTML code:

<div class="example">
	<input type="button" value="Open Full Screen" />
	<input type="button" value="Exit Full Screen" />
</div>

JavaScript code:

<script>
var open = document.querySelector('.example input[value="Open Full Screen"]');
var close = document.querySelector('.example input[value="Exit Full Screen"]');

// Go to full screen mode
open.addEventListener( 'click', function() {
	document.documentElement.requestFullscreen();
}, false );

// Exit full screen mode
close.addEventListener( 'click', function() {
	if ( document.fullscreenElement ) {
		document.exitFullscreen();
	}
}, false );
</script>

Links

1. Element: requestFullscreen() method developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen
2. Document: exitFullscreen() method developer.mozilla.org/en-US/docs/Web/API/Document/exitFullscreen
3. Fullscreen with JavaScript w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen2
4. Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript stackoverflow.com/questions/7179535/set-window-to-fullscreen-real-fullscreen-f11-functionality-by-javascript

Browser support

Windows

Edge 79.0+

Firefox 64.0+

Google Chrome 71.0+

Opera 58.0+

Linux

Firefox 64.0+

Google Chrome 71.0+

Opera 58.0+

iOS

Safari 16.4+ (Available only on iPad, not iPhone)

Android

Samsung Internet 10.0+

Chrome 71.0+

Firefox 64.0+

Opera 50.0+

More

• Open page full screen with older browsers support (JavaScript)