Screen Display

Screen Display

screen reports width, height, availHeight and orientation. Any element can fill the display with requestFullscreen() after a click; :fullscreen styles it and Escape or document.exitFullscreen() leaves. screen.orientation is Widely available, but lock() works only in full screen on Chrome 1 for Android and Firefox 144 555 +.

Reading the screen, then going full screen from a clickJavaScript

console.log(`${screen.width}x${screen.height} ${screen.orientation.type}`);
goButton.onclick = async () => {
  await document.documentElement.requestFullscreen({ navigationUI: 'hide' });
  console.log('fullscreen:', document.fullscreenElement.tagName);
  await screen.orientation.lock('landscape').catch((err) => console.log('lock:', err.name));
  await document.exitFullscreen();
};

Output

1280x720 landscape-primary
fullscreen: HTML
lock: NotSupportedError

Fullscreen is Limited availability: Safari 10 on iPhone lacks it. The Chromium-only Window Management API handles multiple monitors: after a permission prompt, getScreenDetails() lists each screen's position and label, so slides can requestFullscreen({ screen }) onto the projector while notes stay on the laptop.

MENU