Fullscreen System – A3KM Studio Guide

How It Works

Fullscreen Engine

The entire system is an IIFE in Optimization/fullscreen-init.js — under 50 lines. It handles both the first-visit flow and the returning-session flow.

Mobile skip check

First thing — detects mobile via navigator.userAgentData.mobile or UA regex test. If mobile → return immediately. The entire module does nothing on phones/tablets. Fullscreen on mobile browsers is not a useful experience.

Session check — returning visitor path

Reads sessionStorage.getItem('a3km_fullscreen'). If it equals '1', the user already approved fullscreen this session. Attaches to DOMContentLoaded → fires enterFullscreen() after a 300ms delay. Then returns early — no click listener is set up.

First visit — click listener

If session key not found → attaches document.addEventListener('click', onFirstClick). Waits for any click anywhere on the page.

Smart click filtering — navigation excluded

Inside onFirstClick(): checks if the click target is inside an a[href] element. If yes, checks the href — if it's a real navigation link (not #, not empty) → return without triggering fullscreen. This means clicking a nav link to go to another page does not count as the first click. Only actual interaction clicks (buttons, cards, divs) trigger it.

Enter fullscreen + save + remove listener

On a valid first click: ① sessionStorage.setItem('a3km_fullscreen', '1') ② calls enterFullscreen() ③ removes the click listener with document.removeEventListener('click', onFirstClick) — it only fires once.

enterFullscreen() — cross-browser

Calls the fullscreen API with vendor prefix fallbacks: requestFullscreen → webkitRequestFullscreen → mozRequestFullScreen → msRequestFullscreen. Wrapped in .catch(() => {}) so if the browser rejects it (e.g., strict security settings), no error surfaces to the user.

Source Code

Complete Source

The full implementation — 47 lines including comments.

/* Persistent Fullscreen — Optimization/fullscreen-init.js */
(function () {
    'use strict';
    const SESSION_KEY = 'a3km_fullscreen';

    // Skip on mobile
    if (navigator.userAgentData ? navigator.userAgentData.mobile
        : /android|iphone|ipad|ipod/i.test(navigator.userAgent)) return;

    function enterFullscreen() {
        const el = document.documentElement;
        if (document.fullscreenElement) return;
        const fn = el.requestFullscreen || el.webkitRequestFullscreen
                 || el.mozRequestFullScreen || el.msRequestFullscreen;
        if (fn) fn.call(el).catch(() => {});
    }

    // Returning session → auto-enter on load
    if (sessionStorage.getItem(SESSION_KEY) === '1') {
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(enterFullscreen, 300);
        });
        return;
    }

    // First visit: wait for non-navigation click
    function onFirstClick(e) {
        const anchor = e.target.closest('a[href]');
        if (anchor) {
            const href = anchor.getAttribute('href');
            if (href && href !== '#' && !href.startsWith('#')) return;
        }
        sessionStorage.setItem(SESSION_KEY, '1');
        enterFullscreen();
        document.removeEventListener('click', onFirstClick);
    }
    document.addEventListener('click', onFirstClick);
})();

Design Decisions

Why It Works This Way

Why first click, not page load?

Browsers require fullscreen to be triggered from a direct user gesture (click, keypress). Calling requestFullscreen() directly on page load without a user gesture will throw a permission error and silently fail. The first click gives the browser the user gesture it requires.

Why sessionStorage not localStorage?

sessionStorage is per-tab and cleared when the tab is closed. Each new session of the site starts fresh — the user gets the fullscreen prompt once per session. Using localStorage would mean it never prompts again after the first ever visit.

Why skip navigation link clicks?

When a user clicks a nav link, the page navigates. On the new page, the script runs again and finds a3km_fullscreen='1' → auto-enters fullscreen. If navigation clicks also triggered it on the first page load, the fullscreen API call would fire just as the page changes — creating a race condition or double-trigger.

Why the 300ms delay on returning pages?

Even though fullscreen persists through session, the browser still needs a gesture context when entering on a new page load. The 300ms setTimeout gives the DOM time to settle — some browsers are more lenient about gesture requirements when the call happens slightly after DOMContentLoaded.

How to exit fullscreen

Press Esc or F11 at any time. The browser always provides its own fullscreen exit controls regardless of what the page does. The site does not prevent exiting fullscreen. If you exit and then navigate to another page, it will auto-enter fullscreen again (because the session key is still set).

Browser Support

Cross-Browser Compatibility

Browser	API Method	Support
Chrome / Edge (modern)	requestFullscreen()	✓ Standard
Safari (desktop)	webkitRequestFullscreen()	✓ Vendor prefix
Firefox (old)	mozRequestFullScreen()	✓ Vendor prefix
IE 11	msRequestFullscreen()	✓ Vendor prefix
Mobile Chrome/Safari	—	Skipped by mobile UA check

Technical Reference

Code Details

Key Constants & APIs

File

Optimization/fullscreen-init.js

Pattern

IIFE — (function(){ ... })()

Session key

sessionStorage: 'a3km_fullscreen' = '1'

Entry point

document.addEventListener('click', onFirstClick)

Returning session

DOMContentLoaded → setTimeout(enterFullscreen, 300)

Fullscreen API

document.documentElement.requestFullscreen()

Guard check

if (document.fullscreenElement) return — prevents double-enter

Error handling

.catch(() => {}) — silent failure

Mobile skip

navigator.userAgentData.mobile || /android|iphone|ipad|ipod/i

Nav link exclusion

e.target.closest('a[href]') with href check

Scope applies to

All desktop pages that include this script

Explore More

Other Feature Guides

More deep-dives into A3KM Studio features — shortcuts, hidden tricks, mobile vs desktop comparisons and code references.

Browse All 88 Features in the Directory