{"id":14532,"date":"2026-09-24T10:32:16","date_gmt":"2026-09-24T10:32:16","guid":{"rendered":"https:\/\/playgama.com\/blog\/?p=14532"},"modified":"2026-09-24T10:32:16","modified_gmt":"2026-09-24T10:32:16","slug":"how-to-handle-mobile-display-notches-and-safe-area-insets-in","status":"publish","type":"post","link":"https:\/\/playgama.com\/blog\/business-faqs\/how-to-handle-mobile-display-notches-and-safe-area-insets-in\/","title":{"rendered":"How to handle mobile display notches and safe area insets in games?"},"content":{"rendered":"

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.<\/strong><\/p>\n

At a glance<\/h2>\n\n\n\n\n\n\n\n
Fact<\/th>\nValue<\/th>\nSource<\/th>\n<\/tr>\n<\/thead>\n
CSS environment variables for safe area<\/td>\nenv(safe-area-inset-*)<\/td>\ndeveloper.mozilla.org<\/a><\/td>\n<\/tr>\n
Recompute insets when this fires<\/td>\norientation change \/ resize<\/td>\n<\/td>\n<\/tr>\n
Unity calls browser JS through<\/td>\n.jslib plugin<\/td>\ndocs.unity3d.com<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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)<\/code> 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.<\/p>\n

The Playgama Bridge SDK<\/a> exposes this as bridge.device.safeArea<\/code>, returning { top, bottom, left, right }<\/code> in pixels.<\/p>\n

How do you handle safe area in different engines?<\/h2>\n