20

I'm working on my website and I want it to look really simple on mobile, basically there are just three sections, each one should fit window width and height

<section style="width: 100%; min-height: 100%">
   
</section>

It looks perfect on my computer browser in device mode, but when I open it on my mobile (iPhone), there is a problem with url bar, which gets smaller, as we slide down. On page load, min-height adapts to browser height including the bar, and it doesn't change when bar changes it's dimension. So it doesn't fit the screen anymore. I tried this:

<meta name="viewport" content="height=device-height">

But then, sections are to high, obviously. Probably I could do some workaround in jQuery, but I'd rather not. I hope there is some simple solutions in CSS. Thank you for your time.

kacpergalka
  • 231
  • 1
  • 3
  • 11

4 Answers4

16

This is not as easy as one may think.

Here are some extract from The trick to viewport units on mobile:

Case in point: should the scrollbar be taken into account for the vw unit? What about a site's navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch!) that can't be overlooked.

And then the solution propose:

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

And some JS:

// 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`);

And some more JS:

// 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`);
});
Izhaki
  • 23,372
  • 9
  • 69
  • 107
11

You could try the vh (viewport height) unit in your min-height style.

<section style="width: 100%; min-height: 100vh">

</section>

Another option would be to use calc().

<section style="width: 100%; height: calc(100%);">

</section>
Aaron
  • 10,187
  • 3
  • 23
  • 39
  • Actually it does on safari, but doesn't work on chrome. :( Thank's anyway, it's best solution so far, I've never used this unit before. – kacpergalka Apr 17 '15 at 11:42
  • Thank you, the second option worked. Never thought I'd try that one! – Ohiovr Feb 16 '18 at 12:09
  • 1
    calc(100%) works better on mobile bc it does not create v-scroll, different from min-height: 100vh, since mobile browsers adds a floating nav bar – Vagner Gon Jun 28 '21 at 10:01
2

You may try this the scale meta tag: 

<meta name="viewport" content="initial-scale=1, maximum-scale=1">
dbd
  • 159
  • 6
0

The dynamic viewport units should help: https://www.w3.org/TR/css-values-4/#viewport-variants

For example, setting height to 100dvh would make the height equal to 100% of the dynamic viewport height. The dynamic height is affected by any interfaces that are dynamically expanded and retracted, such as the URL bar on a mobile phone browser.

Additionally, at least Chrome on Android requires interactive-widget property in the viewport meta tag. For example: <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

ekuusela
  • 5,034
  • 1
  • 25
  • 43