Recipe 14.7

Getting the Device Orientation

Demo

Device orientation:
Device rotation angle: degrees

Code

JavaScript

const orientationLabel = document.querySelector('#orientation');
const angleLabel = document.querySelector('#angle');

orientationLabel.textContent = screen.orientation.type;
angleLabel.textContent = screen.orientation.angle;

screen.orientation.addEventListener('change', () => {
  orientationLabel.textContent = screen.orientation.type;
  angleLabel.textContent = screen.orientation.angle;
});

HTML

<ul>
  <li>Device orientation: <span id="orientation"></span></li>
  <li>Device rotation angle: <span id="angle"></span> degrees</li>
</ul>