мобильный Chrome запускает событие изменения размера при прокрутке

Я использую мобильный браузер Chrome на galaxy s4, android 4.2.2, и по какой-то причине каждый раз, когда я прокручиваю страницу вниз, он запускает событие изменения размера, подтвержденное масштабированием изображений из слайд-шоу jquery.cycle2.

Есть идеи, почему это может происходить?

Из любопытства я пытался воспроизвести это, и если я прав, это вызвано хромированной панелью навигации.

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

Статья по теме: https://developers.google.com/web/updates/2016/12/url-bar-resizing

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

var width = $(window).width(), height = $(window).height();

то в обработчике события изменения размера вы можете это сделать.

if($(window).width() != width || $(window).height() != height){
  //Do something
}

Я не знаю объема ваших функций и всего прочего, но вы должны понять суть этого.

Не знаю, интересно ли это, но мое решение:)

var document_width, document_height;

$(document).ready(function()
{
	document_width=$(document).width(); document_height=$(document).height();
    // Do something
}

$(window).resize(function()
{
    if(document_width!=$(document).width() || document_height!=$(document).height()) 
    {
        document_width=$(document).width(); document_height=$(document).height();
        // Do something
    }
}	

На этот вопрос уже был дан ответ, но поскольку этот вопрос не затрагивает вопрос об адаптивных сайтах, я хотел бы добавить некоторую информацию по этому поводу.

Я столкнулся с этой проблемой в Chrome на Android при разработке адаптивного веб-сайта. При изменении размера окна я хочу скрыть меню (из-за того, что некоторые элементы дизайна требуют правильного позиционирования), но поведение Chrome для Android, вызывающее событие изменения размера при прокрутке, сделало это несколько сложным.

Переключение на использование onOrientationChange не было вариантом, поскольку это отзывчивый сайт, на настольном ПК нет изменения ориентации, но мне все еще нужен код для работы как на обычных ПК, планшетах и ​​смартфонах.

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

Я попытался реализовать решение, предложенное CWitty, но поскольку прокрутка вверх или вниз фактически вызывает изменение высоты, которое тоже не работает.

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

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

Это дубликат события изменения размера Javascript на мобильном устройстве с прокруткой.

Чтобы исправить это, используйте свойство onOrientationChange и window.orientation. См. Соответствующий ответ: здесь

Оказывается, есть много вещей, которые могут срабатывать resizeв различных мобильных браузерах.

Я знаю, что ссылка на внешний ресурс не идеальна, но в QuirksMode есть читаемая таблица, которую я не хочу дублировать (или поддерживать) здесь: http://www.quirksmode.org/dom/events/resize_mobile.html

Просто чтобы привести пример, который нам приводил: очевидно, во многих браузерах открытие мягкой клавиатуры запускает событие.