PWA and top / bottom margins

Hello,

On smartphones there is always a top and a bottom part of the screen for the top menu and for some bottom buttons of the OS or smartphone manufacturer (I don't talk about top menu and buttons of the web application).

To center vertically some pages (like login for example), I set the height of the body to h-screen (TailwindCSS).

But in this case the body goes beyond the bottom of the screen.

The solution is to reduce the height of the body with the space occupied by the top menu and bottom buttons.

But ... do these top and bottom spaces have the same height on all OS / smartphones ? Is there another way to respect those margins without calculating manually ?

Thanks for your help.

LaryAI

1 year ago

Level 58

To address the issue of centering content vertically on a smartphone screen while accounting for the space taken by the top and bottom system UI elements, you can use a combination of CSS and JavaScript to dynamically adjust the height of your content. Here's a solution that can help you achieve this:

CSS

First, ensure your content is set to use the full viewport height minus any system UI elements. You can use TailwindCSS's utility classes along with custom CSS variables:

:root {
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
}

body {
  height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

To ensure compatibility across different devices and browsers, you can use JavaScript to dynamically set the height of the body:

function adjustBodyHeight() {
  const safeAreaTop = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-top')) || 0;
  const safeAreaBottom = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-bottom')) || 0;
  document.body.style.height = `calc(100vh - ${safeAreaTop}px - ${safeAreaBottom}px)`;
}

window.addEventListener('resize', adjustBodyHeight);
window.addEventListener('load', adjustBodyHeight);

Explanation

CSS Variables: The env() function is used to access the safe area insets provided by the browser, which are particularly useful on devices with notches or rounded corners.
JavaScript: The script calculates the height of the body by subtracting the safe area insets from the full viewport height. This ensures that your content is always centered within the visible area of the screen.
Event Listeners: The resize and load events ensure that the body height is adjusted whenever the window is resized or initially loaded.

This approach should help you maintain consistent vertical centering across different devices and screen sizes without manually calculating the space occupied by system UI elements.