@Dmitry_Vladimirson

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

Что делать если у блока стоит 100vh, но на мобильном часть блока закрывает панель с кнопками навигации?5ff30cdd009dd350350656.png
https://bolddev.co.uk/fruition_new/
  • Вопрос задан
  • 163 просмотра
Решения вопроса 1
SkiperX
@SkiperX Куратор тега CSS
Решение на 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*/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы