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`;