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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

Я написал небольшой ванильный JS ES6 npm module, чтобы исправить проблему:

address-bar-jump-fix

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

Это то, что делает script (упрощенный):

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

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

Ответ 3

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

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

Ответ 4

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