Skip to content
Docs & Tutorials

Full screen

Some of the mechanisms for launching Mattercraft experiences, such the iOS App Clip and Android WebXR, support a full screen mode. In this mode, the page that constitutes your experience fills the device screen from edge to edge, making for a fantastic immersive look and feel. Devices may feature camera notches, islands or other operating system UI that can overlap your page in full screen mode, so it’s important that any user interface in your experience uses the ‘safe area’ features provided to avoid these.

Opting Out

Section titled “Opting Out”

Newly created projects opt-in to full screen mode by default. If you’d like, you can opt out of this feature - the iOS App Clip will automatically constrain your page to the safe area of the screen, leaving empty bars at the top and bottom of the screen for any camera notches or operating system UI.

To opt-out, open the index.html file in your project and remove viewport-fit=cover from the <meta ...> tag at the top of that file.

Opting In

Section titled “Opting In”

If you’d like to opt-in to full screen mode for a project that was created before the mode was enabled by default, open the index.html file in your project and make the following changes:

  1. In the <meta...> element at the top of the file, add , viewport-fit=cover to the content attribute, like this:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  1. In the <style> element, add width: 100vw; and height: 100vh;, like this:
body,
html {
  padding: 0;
  margin: 0;
  font-family: sans-serif;


  width: 100vw;
  height: 100vh;
}

Adjusting the UI

Section titled “Adjusting the UI”

You will need to account for the safe area when building the UI of your project. You may wish some elements to extend to the edge of the full screen (e.g. borders or backgrounds), and some elements to appear clear of any notches (e.g. buttons or text).

If you’re using HTML components in your scene files, then the following values for the horizontalAnchor and verticalAnchor properties can be used:

  • topSafe, bottomSafe, leftSafe and rightSafe - the node will be positioned on screen such that it’s clear of any notches or operating system UI
  • top, bottom, left, right - the node will be positioned at the edge of the full screen, and may appear behind notches or operating system UI

If you’re using Camera Transform in your scene files, then the following values for the horizontalAnchor and verticalAnchor properties can be used:

  • topSafe, bottomSafe, leftSafe and rightSafe - the origin of the node will be positioned in space such that it’s clear of any notches or operating system UI
  • top, bottom, left, right - the origin of the node will be positioned at the edge of the full screen, and may be behind notches or operating system UI

If you’re writing custom CSS or HTML then use can use the following CSS variables. They contain the pixel size of any safe area offset to the edge of the page:

  • var(--safe-area-inset-top)
  • var(--safe-area-inset-bottom)
  • var(--safe-area-inset-left)
  • var(--safe-area-inset-right)

You can use these variables in the padding and margin CSS properties of any custom HTML you write.

You may be aware of the env(...) versions of these variables. Some of the browsers supported by Mattercraft - WebXR in Google Chrome in particular - do not set the env(...) variables correctly at this time. For that reason, Mattercraft provides the above var(...) versions that should work in all cases.