I'm having trouble positioning a SPA to fit correctly on mobile (specifically iphone X). The website is extending behind the address bar instead of shrinking to fit the viewable portion.

Here's what the user sees currently:

iphone X website extends below/behind address bar

With a brute-force 80px bottom padding on the entire application, you can see the nav bar:

with 80px bottom padding

The css rules I have on the top level div are pretty straightforward:

.App {
 text-align: center;
 color: white;

 height: 100vh;
 width: 100vw;
  
 overflow: hidden;
}

And in index.html I've included

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />

I have also tried using env(safe-area-inset-bottom) for bottom-padding, but that doesn't seem to work.

How can I adjust the webpage for this specific scenario?

CodePudding user response：

Okay so after some trial and error I have been able to find a solution that doesn't seem to compromise other viewports / devices:

.App {
  text-align: center;
  color: white;

  position: absolute;

  height: 100%;
  width: 100%;
}

I'm not sure why exactly, but switching form VH / VW to % and setting an absolute positioning did the trick. I guess ios safari doesn't like the use of explicit viewport units