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.
Screen Orientation
Live type/angle display with lock() demos
-
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
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
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