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 ??

@Manikandan2811 that is not true, this is the most used media breakpoint for mobile devices, but not actual size. Also, OP is talking about height, not width — Morpheus, Jul 23 '19 at 10:25
@Freestyle09 you will not be able to cover all mobile devices as they have different heights. You could potentially use `height: calc(100vh - headerHeight)` — Morpheus, Jul 23 '19 at 10:29
No, it is not. You mentioned `100px`, so assuming that is header height. So the final css would be `height: calc(100vh - 100px)` — Morpheus, Jul 23 '19 at 10:35
I writting scss so it can be but how you think... I have 56px menu banner fixed at bottom subtract it too ? — Freestyle09, Jul 23 '19 at 10:36
Yeah it's fixed but it's in the bottom so I would need margin bottom that all content is displayed properly, Ok I have changed that and I will test now — Freestyle09, Jul 23 '19 at 10:40
In that case create a minimal, reproducible example so we can see what is the problem -> https://stackoverflow.com/help/minimal-reproducible-example — Morpheus, Jul 24 '19 at 08:07
please visit https://kolobrzeg.taxi/ this issue is on portrait mode on mobile less than 677px — Freestyle09, Jul 24 '19 at 11:06
Once I had to solve this too. I tried a lot even with javascript and it never fits 100%. After reading this post https://stackoverflow.com/a/37113430/10944219 I gave up. My workaround was to build an oversized
and made it overflow:hidden to hide the scrollbars. Good luck. — tom, Aug 14 '19 at 14:58

score 3 · Accepted Answer · answered Aug 16 '19 at 06:15

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>

Actual size of window screen in media queries

1 Answers1