getSafeAreaInset

getSafeAreaInset is a utility function that returns all safe area insets in pixels as an object.

This function reads the CSS env(safe-area-inset-*) values by creating a temporary DOM element and reading its computed style.

Safe area insets account for device-specific UI elements:

• top: Notch, Dynamic Island, or status bar
• bottom: Home indicator on Face ID devices
• left/right: Rounded corners in landscape mode

Typical values (iPhone with Face ID, portrait mode):

• top: 47-59px (notch/Dynamic Island)
• bottom: 34px (home indicator)
• left/right: 0px

Interface

function getSafeAreaInset(): SafeAreaInset;

Parameters

Return Value

• SafeAreaInset
  

  containing safe area insets for all four sides, or all 0 if not available.

  • topnumber
    

    Top safe area inset in pixels.

  • bottomnumber
    

    Bottom safe area inset in pixels.

  • leftnumber
    

    Left safe area inset in pixels.

  • rightnumber
    

    Right safe area inset in pixels.

Example

const { top, bottom, left, right } = getSafeAreaInset();

header.style.paddingTop = `${top}px`;
footer.style.paddingBottom = `${bottom}px`;