Query the device’s safe-area insets (top, bottom, left, right in pixels) and pad or reposition HUD elements so nothing sits under a notch, rounded corner or platform UI. Recompute on orientation change and window resize.
At a glance
| Fact | Value | Source |
|---|---|---|
| CSS environment variables for safe area | env(safe-area-inset-*) | developer.mozilla.org |
| Recompute insets when this fires | orientation change / resize | |
| Unity calls browser JS through | .jslib plugin | docs.unity3d.com |
Get the safe-area insets in pixels (top, bottom, left, right – the space not covered by a notch, rounded corner or platform UI) and use them to offset your HUD, buttons and score text before you draw or layout a frame. In plain web canvas games, CSS env(safe-area-inset-top) etc. gives you the same values on iOS Safari; read them once at load and again on every orientation change or resize event, since insets swap between portrait and landscape.
The Playgama Bridge SDK exposes this as bridge.device.safeArea, returning { top, bottom, left, right } in pixels.
How do you handle safe area in different engines?
- Unity WebGL: read the browser’s safe-area values through a .jslib plugin that calls browser JavaScript.
- Godot 4 (web export): call browser JavaScript through the
JavaScriptBridgesingleton to read CSS environment variables, then apply the offsets to your UI’s anchors or margins. - Plain HTML5/canvas: read CSS env() values via getComputedStyle in JavaScript.
Apply insets as padding on your outer UI container, not by shrinking the canvas itself, so game logic and coordinates stay unaffected. Re-run the check on resize/orientationchange, and fail safe: if insets come back as zero (desktop, older browsers), your layout should just use the full screen without breaking.
Sources
- Playgama Bridge: Device / Safe Area
- Playgama Bridge: API
- Playgama Bridge getting started
- Unity manual: interacting with browser scripting
- Godot docs: exporting for the Web
Related questions
Do I need to handle safe area on desktop browsers?
No – insets are typically zero on desktop, so your layout should default to full-screen and only apply padding when non-zero values are returned.
Should the canvas itself shrink to fit the safe area?
No – keep the canvas and game coordinates full-size and apply safe-area padding only to the UI overlay layer, so gameplay logic stays unaffected.
Last updated: 24 September 2026