How to Change Screen Orientation with Javascript

Changing screen orientation becomes somewhat necessary in some cases, like playing HTML5 games in the browser — the game obviously needs to be locked to landscape mode to have a good gaming experience.

You can change screen orientation and then lock it by following the below steps :

1. First use the Fullsreen API to make the container go to full-screen mode. It is compulsorily required to go to full-screen before changing the screen orientation, otherwise it won't work.
2. Then use the Screen Orientation API to lock the screen to landscape or portrait mode. The API also includes a method to unlock the screen orientation, and an event to detect change in orientation.

Demo

Click here to see demo

Download codes for demo

Going to Full-Screen Mode

It is necessary to go to full-screen mode before locking the screen orientation. An element can be made to go to full-screen by using the requestFullscreen method on the element.

// we still need prefixed methods for Chrome & Safari
if(document.querySelector("#container").requestFullscreen)
	document.querySelector("#container").requestFullscreen();
else if(document.querySelector("#container").webkitRequestFullScreen)
	document.querySelector("#container").webkitRequestFullScreen();

The :fullscreen selector can be used to change the CSS of the element when in full-screen mode.

#container:fullscreen {
	width: 100%;
	height: 100%;
	background-color: green;
}

/* prefix for Chrome & Safari */
#container:-webkit-full-screen {
	width: 100%;
	height: 100%;
	background-color: green;
}

Locking Orientation with the Screen Orientation API

Now that the full-screen is activated you can use the Screen Orientation API to lock the screen to landscape or portrait mode.

The window.screen global object exposes properties, methods and events related to screen orientation :

• Reading Current Orientation and Angle

  The window.screen.orientation property gives the current orientation of the screen.

  var current_mode = screen.orientation;
  
  // type
  console.log(current_mode.type)
  
  // angle
  console.log(current_mode.angle)
  

  4 types of modes can be returned :

  1. portrait-primary - normal
  2. portrait-secondary - upside down
  3. landscape-primary - bottom of device is on right
  4. landscape-secondary - bottom of device is on left
• Locking Orientation

  The screen.orientation.lock() method locks the orientation of the screen to a specific mode.

  screen.orientation.lock("portrait")
  	.then(function() {
  		alert('Locked');
  	})
  	.catch(function(error) {
  		alert(error);
  	});
  

  The locking type can be one of any, natural, landscape, portrait, portrait-primary, portrait-secondary, landscape-primary & landscape-secondary

  The return value is a Promise.

• Unlocking Orientation

  The screen.orientation.unlock() method unlocks the current orientation of the screen.

  screen.orientation.unlock()

  Please note that unlocking will not exit the full-screen mode by itself. Also on exiting full-screen, lock is automatically released. You will need to handle these 2 cases in your code.

• Detecting Change in Orientation

  The screen.orientation.onchange event is fired whenever the screen orientation changes.

  screen.orientation.addEventListener('change', function() {
  	console.log('Current orientation is ' + screen.orientation.type);
  });
  

Sample Codes

<div id="container">
	<p id="orientation-status"></p>
	<button id="lock-landscape-button">Lock to Landscape Mode</button>
	<button id="unlock-button">Unlock</button>
</div>

var _LOCK_BUTTON = document.querySelector("#lock-landscape-button"),
	_UNLOCK_BUTTON = document.querySelector("#unlock-button"),
	_STATUS = document.querySelector("#orientation-status");

_STATUS.innerHTML = screen.orientation.type + ' mode';

// upon lock to landscape-primary mode
document.querySelector("#lock-landscape-button").addEventListener('click', function() {
	if(document.documentElement.requestFullscreen)
		document.querySelector("#container").requestFullscreen();
	else if(document.documentElement.webkitRequestFullScreen)
		document.querySelector("#container").webkitRequestFullScreen();

	screen.orientation.lock("landscape-primary")
		.then(function() {
			_LOCK_BUTTON.style.display = 'none';
			_UNLOCK_BUTTON.style.display = 'block';
		})
		.catch(function(error) {
			alert(error);
		});
});

// upon unlock
document.querySelector("#unlock-button").addEventListener('click', function() {
	screen.orientation.unlock();

	_LOCK_BUTTON.style.display = 'block';
	_UNLOCK_BUTTON.style.display = 'none';
});

// when screen orientation changes
screen.orientation.addEventListener("change", function() {
	_STATUS.innerHTML = screen.orientation.type + ' mode';
});

// on exiting full-screen lock is automatically released
document.addEventListener("fullscreenchange", function() {
	_LOCK_BUTTON.style.display = 'block';
	_UNLOCK_BUTTON.style.display = 'none';
});

// for Chrome & Safari
document.addEventListener("webkitfullscreenchange", function() {
	_LOCK_BUTTON.style.display = 'block';
	_UNLOCK_BUTTON.style.display = 'none';
});