JavaScript: Fullscreen API для перехода в полноэкранный режим

Fullscreen API позволяет отображать элемент или всю страницу в полноэкранном режиме.

Это полезно, когда вы хотите увеличить размер отображаемого содержимого, например, для просмотра изображений или видео в режиме полного экрана.

<button id="fullscreenBtn">Включить полноэкранный режим</button>
<img id="image" src="image.webp">

Проверяем, поддерживается ли метод requestFullscreen() на текущей платформе, и используем соответствующий метод для каждого браузера.

const fullscreenButton = document.querySelector('#fullscreenBtn');
const image = document.querySelector('#image');

fullscreenButton.addEventListener('click', () => {
	if( image.requestFullscreen )
	{
		image.requestFullscreen();
	} 
	else if( image.mozRequestFullScreen )
	{
		image.mozRequestFullScreen();
	} 
	else if( image.webkitRequestFullscreen )
	{
		image.webkitRequestFullscreen();
	} 
	else if( image.msRequestFullscreen )
	{
		image.msRequestFullscreen();
	}
});