100vh on mobiles is taller than a real visible part

Question

I need to cover the whole visible part of browser window but using 100vh I clashed with problems on some devices and in some mobile browsers. First of all, in Safari browser url section hides a top part. Secondly, the same problem on some Android devices in Chrome.

How to consider these things?

Doesn’t the URL bar usually go away once the user interacts with the page? // If this already is not calculated “correct” when using pure CSS, I doubt any attempts at fixing this with JavaScript would be more successful, that will likely have the same problems that whatever screen measurements you try to read will have the same “errors”. — CBroe, Mar 16 '17 at 13:11
Well I guess you can try and check with JS if any of the relevant properties allow to detect this case ... screen height vs window height, etc. — CBroe, Mar 16 '17 at 13:30
@CBroe If there is no way to solve it without js I'll have to use this method. Thanks. — Alexander Shpindler, Mar 16 '17 at 13:52
As I said, I am not even sure that it is solvable with JS … you’ll have to do some testing to find out. — CBroe, Mar 16 '17 at 14:41

score 2 · Answer 1 · answered Mar 16 '17 at 15:28

One solution is to set a height as window.innerHeight and set these event listeners correcting the height when screen is resizing.

chat.style.height = window.innerHeight + "px";

window.addEventListener("orientationchange", e => {
    if (document.body.offsetWidth < 768) chat.style.height = window.innerHeight + "px";
}, false);

window.addEventListener("resize", e => {
    if (document.body.offsetWidth < 768) chat.style.height = window.innerHeight + "px";
}, false);

It works.

100vh on mobiles is taller than a real visible part

1 Answers1