Full Screen Shortcut Mastery: Windows, Mac, and Web

Learn full screen shortcuts across Windows, macOS, and web apps. This guide covers OS shortcuts, browser behavior, and the JavaScript Fullscreen API with hands-on code examples.

Shortcuts Lib Team

February 20, 2026·5 min read

Keyboard Shortcuts Windows Shortcuts Mac Shortcuts

Full Screen Shortcut - Shortcuts Lib — Photo by ClickerHappyvia Pixabay

Quick AnswerDefinition

A full screen shortcut toggles the active window or media to occupy the entire screen, hiding browser chrome and other UI. For browsers, F11 on Windows and Ctrl+Cmd+F on macOS toggle fullscreen. Web apps can also expose the JavaScript Fullscreen API to requestFullscreen and exitFullscreen, enabling immersive experiences.

What is a full screen shortcut?

A full screen shortcut is a keyboard command that expands the active window or media to fill the screen, hiding browser chrome and other UI chrome for a distraction-free view. On desktops, OS-level shortcuts affect the entire window, while browser-specific shortcuts may only affect the browser chrome or an embedded video. As a developer, supporting fullscreen transitions improves media experiences and presentations.

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Fullscreen Demo</title>
</head>
<body>
  <div id="stage" style="border:1px solid #333; padding:20px; width:640px; height:360px; display:flex; align-items:center; justify-content:center;">
    <video id="vid" width="640" height="360" controls src="path/to/video.mp4"></video>
  </div>
  <button id="fsBtn">Toggle Fullscreen</button>
  <script>
    const stage = document.getElementById('stage');
    const btn = document.getElementById('fsBtn');
    async function goFullscreen(el) {
      if (el.requestFullscreen) await el.requestFullscreen();
      else if (el.webkitRequestFullscreen) await el.webkitRequestFullscreen(); // Safari
      else if (el.msRequestFullscreen) await el.msRequestFullscreen(); // IE/Edge legacy
    }
    async function exitFullscreen() {
      if (document.exitFullscreen) await document.exitFullscreen();
      else if (document.webkitExitFullscreen) await document.webkitExitFullscreen();
      else if (document.msExitFullscreen) await document.msExitFullscreen();
    }
    btn.addEventListener('click', async () => {
      if (!document.fullscreenElement) {
        await goFullscreen(stage);
      } else {
        await exitFullscreen();
      }
    });
  </script>
</body>
</html>

Notes:

The API surface is async in modern browsers; use try/catch for production code.
Safari requires the webkit-prefixed method in older versions

javascriptCodeBlockCountInSectionForVariousPurposesInThisSectionIncreasesWhenNeededSectionNoteforCohesion

Steps

Estimated time: 60-90 minutes

1
Set up a minimal page
Create a container element and a toggle button. Define styles to demonstrate the fullscreen effect and ensure an element inside is the one entering fullscreen.
Tip: Keep the target element simple to avoid layout shifts when entering fullscreen.
2
Add fullscreen API wrappers
Implement enterFullscreen(element) and exitFullscreen() with vendor prefixes (webkit, ms) to maximize compatibility.
Tip: Feature-detect before calling any fullscreen methods.
3
Hook a user gesture
Bind a click or keypress event to trigger enterFullscreen. Browsers require a user gesture to enter fullscreen.
Tip: Avoid triggering fullscreen on page load.
4
Handle fullscreenchange
Listen for fullscreenchange events to update UI state and accessibility attributes.
Tip: Keep ARIA attributes in sync with fullscreen state.
5
Test across browsers
Verify behavior in Chrome, Firefox, Safari, and Edge; check mobile browsers for support differences.
Tip: Test on both Windows and macOS, plus mobile devices.
6
Provide an exit path
Ensure there is always an explicit exit option and that Esc exits fullscreen by default.
Tip: Never trap users in fullscreen.

Pro Tip: Test in multiple browsers and OS versions to verify consistent behavior.

Warning: Avoid overriding native keyboard shortcuts; prefer in-app toggles with clear user consent.

Note: Always announce fullscreen state to screen readers when entering or leaving fullscreen.

Prerequisites

Required

A modern browser with Fullscreen API support↗
Required
Basic HTML/JavaScript knowledge
Required

Optional

Code editor or IDE (for local testing)
Optional
Knowledge of your OS-level shortcuts (Windows/macOS) for cross-checking
Optional

Keyboard Shortcuts

Action	Shortcut
Toggle browser fullscreenCommon in browsers to enter system fullscreen mode	`F11`

Questions & Answers

What is the difference between fullscreen mode and maximizing a window?

Fullscreen hides most browser chrome and other UI, creating an immersive view. Maximizing a window expands the window but keeps browser chrome visible. Fullscreen is typically managed by the application or OS, whereas maximizing is handled by the window manager.

Is fullscreen available on mobile devices?

Most mobile browsers support fullscreen via the Fullscreen API, especially in video players and web apps. Implementation can vary by browser and platform, and some features may be restricted in embedded contexts.

How do I exit fullscreen programmatically?

Call document.exitFullscreen() (with vendor prefixes for older browsers) or trigger the browser's native exit fullscreen. Always confirm the current fullscreenElement before attempting to exit.

Why does fullscreen require a user gesture?

To prevent malicious pages from hijacking the screen, browsers require a user gesture (like a click) to enter fullscreen. This helps preserve user control and security.

Can I detect fullscreen state in frameworks like React or Vue?

Yes. You can listen for fullscreenchange events at the document level and update your framework's state accordingly. Many frameworks integrate this in lifecycle or effect hooks.