Screen Orientation Playground - Free Online Tool | IconVault

Learn the Screen Orientation API: live type and angle, a device mirror, lock() and unlock() demos with honest errors. Free, in your browser.

All tools

Screen Orientation

Live type/angle display with lock() demos

5 of 5 free uses left
Screen Orientation APIChecking…

-

type (live)

-

angle (live)

lock() demos

On desktop the lock buttons usually reject (Chrome allows locking only from fullscreen or on mobile). The rejection message is shown honestly so you can see the real API contract.

Device mirror

no data

Rotate your phone or resize/orient your screen - the mock follows the real screen.orientation events.

Working pattern

// Read orientation live
const so = screen.orientation;
console.log(so.type, so.angle); // e.g. "landscape-primary", 90

// React to changes
so.addEventListener("change", () => {
  console.log("now:", so.type, so.angle);
});

// Lock (returns a promise; may need fullscreen)
try {
  await so.lock("landscape");
} catch (err) {
  console.warn("Could not lock:", err);
}
so.unlock();

About this tool

IconVault's Screen Orientation Playground reads your real screen.orientation and mirrors it: the type (portrait-primary, landscape-secondary, and friends) and angle update live as you rotate your device, and an animated phone mock follows along. Buttons demo lock() for all eight orientation values and unlock(), with the genuine success or rejection shown, and a fullscreen toggle is included because most browsers only allow locking from fullscreen. It is free and runs fully in your browser.

Screen orientation matters for games, video, and kiosk apps, but the API contract has teeth: lock() returns a promise that rejects on desktop, on non-fullscreen pages, and where the platform forbids it. This lab reports those real outcomes instead of faking a lock, so you learn the exact conditions under which orientation locking works, and ships a copyable pattern with the try/catch you will need in production.

Frequently asked questions

Popular searches

screen orientation apiscreen orientation tutorialscreen orientation javascriptscreen.orientationscreen orientation lockscreen.orientation.lockscreen orientation unlockscreen.orientation.unlockorientation type anglelandscape-primaryportrait-primarylandscape-secondaryportrait-secondaryorientation lock weblock screen orientation websitescreen orientation change eventorientationchangehow to lock orientation jsscreen orientation demoscreen orientation playgroundscreen orientation mdnscreen orientation browser supportscreen orientation chromescreen orientation safariscreen orientation iosscreen orientation androidorientation lock fullscreenlock orientation fullscreen requiredpwa orientation manifestweb app manifest orientationdetect screen rotation javascriptget screen orientation jsportrait vs landscape detectionresponsive orientation webgame orientation lockvideo fullscreen orientationscreen orientation typescriptscreen orientation reactlearn screen orientation apiinteractive orientation demodevice rotation webscreen angle 90 270orientation lock not workingscreen.orientation not supportedmobile web orientationtablet orientation apikiosk orientation lockscreen orientation code sampleweb orientation apiscreen rotation javascriptorientation media query vs api

More tools

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →