URL-строка, скрывающаяся при прокрутке на телефоне "100% высоты" вверх

У меня есть следующий демо-сайт: http://woohooo.fortleet.com/

Части контента, а также навигация настроены на 100% высоты. Когда я нахожусь на своем телефоне, вот этот URL-адрес вверху, который скрывается, когда я прокручиваю вверх. Тем не менее, этот эффект разрушает 100% -ную высоту, потому что он настраивается на новый размер браузера, создавая неприятный эффект. То же самое относится к единицам "vh" и "vw".

Я пробовал следующее:

function windowDimensions() {

  if (html.hasClass('touch')) {
    height = window.screen.height;
    width = window.screen.width;
  } else {
    height = win.height();
    width = win.width();
  }

}

function screenFix() {
  if (html.hasClass('touch')) {

    touch = true;
    nav.css({'height' : height + 'px'});
    home.css({'height' : height + 'px'});
    header.css({'height' : height/2 + 'px'});
    content.css({'min-height' : height + 'px'});

  }
}

Это, однако, создает проблему, потому что в VERY TOP есть эта панель с батареей, Wi-Fi, информация о сигнале, которая также учитывается на высоте экрана, делая элементы "100%" и "vh" немного большими.

Я не мог поверить, что не нашел другого вопроса об этом, поскольку я предположил, что это довольно распространенная проблема для 100%/100% сайтов.

Вы, ребята, знаете какое-либо решение для этого?

Ответ 1

Метафока вашего viewport кажется прекрасной. 100vh не будет принимать во внимание панель меню /wifi/top. Он будет обеспечивать только высоту видового экрана, которая не учитывает меню на телефонах. Важно отметить, что 100vh и 100% не будут одинаковой высоты. Я взглянул на ваш сайт на мобильном телефоне и на рабочем столе, каждый раздел выглядит 100vh без каких-либо дополнительных дополнений (так что это выглядит правильно для меня).

Если вы ссылаетесь на строку URL-адреса iPhone, которая автоматически переключается и прокручивается при прокрутке, тогда у вас не будет никакого способа скрыть или переключить этот экран. Панель URL появляется при прокрутке вверх... так что да... это может означать, что у вас будет 20 пикселей или около того, что не будет видно, когда пользователь будет прокручивать вверх. Однако это обычно не проблема, потому что когда вы прокручиваете вниз, IOS скрывает этот бар... чтобы не влиять на представление экрана. Это может не ответить на ваш вопрос, но строка URL - это то, что я предположил, что вы имели в виду.

Ответ 2

Звучит так, как будто ваш видоискатель настроен неправильно. Я почти уверен, что он не должен учитывать эти дополнительные 10-20 пикселей.

Если вы еще этого не сделали, попробуйте установить метафайл представления и отключить все параметры масштабирования. Надеюсь, это поможет:)

Ссылка: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag