Адресная строка браузера веб-браузера (хром) изменяет значение $ (window) .height (); Создание фонового размера: масштабирование обложки каждый раз

Проблема в том, что у меня есть несколько DIV, расположенных абсолютно, которые имеют размер фона: обложка; И их высота вычисляется javascript для заполнения 100% окна просмотра. На каждом настольном браузере и мобильном firefox все в порядке, но на адресной строке мобильного Chrome (при появлении / исчезновении) изменяется $ (windows) .height (); стоимость. Это приводит к причудливому масштабированию фонового изображения каждый раз, когда он это делает. Существует ли временное решение, чтобы всегда отображать адресную строку (поэтому значение высоты окна не изменилось) или какое-либо другое решение при сохранении фонового размера: обложка; Масштаб одинаковый независимо от адресной строки?

Я знаю, что вы говорите о Chrome, но в случае мобильного Safari, нового с ios 7.1, вы можете добавить этот атрибут в тег viewport «minimum-ui», и это предотвратит появление панели навигации и адресной строки И вне.

Надеюсь, в будущем другие браузеры, такие как Mobile Chrome, также будут принимать это значение.

Вы можете прочитать здесь: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs

Я решил аналогичную проблему, используя:

$(document).ready(function() { var screenHeight = $(window).height(); $('div_with_background_image').css('height', screenHeight + 'px'); }); 

Я написал небольшой ванильный модуль JS ES6 npm для исправления проблемы:

адресно-бар прыжок затруднительного

Все, что вам нужно сделать, это загрузить модуль и поместить атрибут данных на каждый элемент перехода.

Это то, что делает сценарий (упрощен):

  • Когда пользователь начинает прокрутку, сценарий сохраняет начальную высоту каждого элемента, имеющего определенный атрибут данных. (Данные скачкообразное затруднительного = «истина»)
  • Пока пользователь прокручивается, а видовое окно изменяет размер, скрипт предотвращает изменение размера всех выбранных элементов за счет их первоначальной высоты.

Источник скомпилирован в ES5 для поддержки старых браузеров.

Я понимаю, что это более старый вопрос, но команда Chrome сделала «исправление», что должно предотвратить эту проблему в будущем. В настоящее время он находится в Канарских островах, но, как мы надеемся, он скоро станет стабильным. Это планируется для Chrome M56 .