Адаптивная верстка с учетом системного меню мобильных браузеров

Question

Коллеги, столкнулся с неожиданной проблемкой. Задача: Сделать однослайдовый сайт-визитку с flex разверткой ровно на область просмотра, чтобы у сайта не было скролла. С этим я разобрался. Беда пришла откуда не ждали. На мобильных браузерах поверх заявляемой ими области просмотра, как правило, есть системное меню, или адресная строка, которая, как раз убирается при скроллинге. Как мне можно повлиять на верстку с учетом этого меню, или адресной строки?

Пробовал через JS чекнуть эти области и прописать паддинги сверху(на header), или снизу(на footer), но, поскольку я еще только учусь, знания мои ограничены, пока ничего не получается (

Заранее спасибо.

function hasSystemMenu() {
    return window.visualViewport.height < window.innerHeight;
  }
  
  function getSystemMenuHeight() {
    if (hasSystemMenu()) {
      return window.innerHeight - window.visualViewport.height;
    }
    return 0;
  }
  
  if (hasSystemMenu()) {
    const systemMenuHeight = getSystemMenuHeight();
  }

  function setPaddingForSystemMenu() {
    var systemMenuHeight = getHeightOfSystemMenu(); 
  
    var header = document.querySelector('.header');
    var footer = document.querySelector('.footer');
  
    if (header) {
      header.style.paddingTop = systemMenuHeight + 'px';
    }
  
    if (footer) {
      footer.style.paddingBottom = systemMenuHeight + 'px';
    }
  }
  
  setPaddingForSystemMenu();

Answer 1

Можете попробовать решить вашу проблему через свойство height:100dvh Если я правильно понял вашу проблему. Если не надо подерживать очень старые браузеры это должно помочь. dvh

БЛОГ НА HUSL

Адаптивная верстка с учетом системного меню мобильных браузеров

Ответы (1 шт):