Как получить реальные 100vh на смартфоне?

Question

[Dmitry_Vladimirson]

Что делать если у блока стоит 100vh, но на мобильном часть блока закрывает панель с кнопками навигации?
https://bolddev.co.uk/fruition_new/

Comments

[Дмитрий]

вопрос хороший, но я в свое время тупо забил, потому что это на каждом устройстве, на каждом браузере - разное поведение.
мучался с js. потом просто через media сделал бОлшие отступы и прочее для мобильных.
с удовольствием прочитаю, если за пару лет что-то изменилось.

Answer 1

[Алекс Глебов]

Решение на js

/*Viewport Height Correction
    https://github.com/Faisal-Manzer/postcss-viewport-height-correction
     .foo {
            height: 100vh;
            height: calc(var(--vh, 1vh) * 100); //
      }
    */
    var customViewportCorrectionVariable = 'vh';
    function setViewportProperty(doc) {
        var prevClientHeight;
        var customVar = '--' + ( customViewportCorrectionVariable || 'vh' );
        function handleResize() {
            var clientHeight = doc.clientHeight;
            if (clientHeight === prevClientHeight) return;
            requestAnimationFrame(function updateViewportHeight(){
                doc.style.setProperty(customVar, (clientHeight * 0.01) + 'px');
                prevClientHeight = clientHeight;
            });
        }
        handleResize();
        return handleResize;
    }
    window.addEventListener('resize', setViewportProperty(document.documentElement));
    /*/Viewport Height Correction*/