Actual size of window screen in media queries

Question

I'm creating a media queries for my website and I have problem with actual size of browser in mobile.

/* iphone XS Max */
@media only screen and (min-device-width: 414px) and (max-device-width: 677px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  main#home {
    max-height: 740px;
  }
}

I have header 100px and mobile fixed menu with 56px height which gives me result 740px height for my content. The problem is that in developer tools it looks great but in mobile I'm getting the URL banner and navigation banner at the bottom of page and that brings me an issue that my page is too large and I have scroll. My question is:

What is the actual size of content without banners from default browsers in mobile??

EDIT

100vh for Iphone XS Max means all viewport height including those two red boxes too. How to substract from viewport height those red boxes ??

Answer 1

unfortunately with plain CSS this is not possible as far as I know.

However there is a workaround. Which I've found on CSS-Tricks by Louis Hoebregts here

"In JavaScript, you can always get the value of the current viewport by using the global variable window.innerHeight. This value takes the browser's interface into account and is updated when its visibility changes. The trick is to store the viewport value in a CSS variable and apply that to the element instead of the vh unit.

Let's say our CSS custom variable is --vh for this example. That means we will want to apply it in our CSS like this:"

CSS
    .my-element {
         height: 100vh; /* Fallback for browsers that do not support 
                      Custom Properties */
         height: calc(var(--vh, 1vh) * 100);
    }


JavaScript
// First we get the viewport height and we multiple it by 1% 
// to get a value for a vh unit
let vh = window.innerHeight * 0.01;

// Then we set the value in the --vh custom property to the 
// root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

"So, we told JS to grab the height of the viewport and then drilled it down into 1/100th of that total so we have a value to assign as our viewport height unit value. Then we politely asked JS to create the CSS variable (--vh) at the :root.

As a result, we can now use --vh as our height value like we would any other vh unit, multiply it by 100 and we have the full height we want.

[...]

We can update the value of --vh by listening to the window resize event. This is handy in case the user rotates the device screen, like from landscape to portrait, or the navigation moves out of view on scroll."

// We listen to the resize event
window.addEventListener('resize', () => {
    // We execute the same script as before
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
});

Here is a working Code-Snippet for you

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

body {
  background-color: #333;
  margin:0;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>