Web API: Screen Orientation API для проверки и блокировки ориентации экрана

Screen Orientation API позволяет проверять текущую ориентацию экрана и блокировать её в определённой ориентации.

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

<button id="lockBtn">Заблокировать ориентацию</button>
<button id="unlockBtn">Разблокировать ориентацию</button>
<button id="statusBtn">Проверить ориентацию</button>

Метод screen.orientation.lock() блокирует ориентацию экрана.

Метод screen.orientation.unlock() деблокирует ориентацию экрана.

const lockButton = document.querySelector('#lockBtn');
const unlockButton = document.querySelector('#unlockBtn');
const statusButton = document.querySelector('#statusBtn');

lockButton.addEventListener('click', () => {
	if( screen.orientation.lock )
	{
		screen.orientation.lock( 'landscape' )
		.then(() => {
			console.log('Ориентация экрана заблокирована в режиме landscape');
		})
		.catch(err => {
			console.error('Ошибка блокировки ориентации экрана', err);
		});
	}
	else 
	{
		console.error('Блокировка ориентации экрана не поддерживается');
	}
});

unlockButton.addEventListener('click', () => {
	if( screen.orientation.unlock )
	{
		screen.orientation.unlock();
		console.log('Ориентация экрана разблокирована');
	} 
	else 
	{
		console.error('Разблокировка ориентации экрана не поддерживается');
	}
});

statusButton.addEventListener('click', () => {
	console.log(`Текущая ориентация экрана: ${screen.orientation.type}`);
});