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

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

Любая идея, почему это может произойти?

58
Это оказалось проблемой с событием изменения размера, но поскольку высота моего элемента была установлена ​​в 100% от области просмотра, она пересчитывалась в прокрутке.
добавлено автор KobeBryant, источник

7 ответы

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

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

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

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

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

59
добавлено
Спасибо за подсказку Крис!
добавлено автор CWitty, источник
Проблема вызвана скрытием или показом полосы прокрутки, в результате чего высота экрана изменяется, поэтому запускается $ (window) .resize() . Я предложил изменить.
добавлено автор Sander Koedood, источник
Просто хотелось добавить, что мы также наблюдали подобное поведение с iOS Safari.
добавлено автор Kris Krause, источник
это должно быть || вместо &&
добавлено автор Maysam, источник
так как это высота, которая меняет условие if, нужно только проверять изменение в ширине. Также условие не срабатывает, пока не изменились ширина и высота. что не всегда так, но почти все изменения экрана связаны с изменением ширины, поэтому я предлагаю не использовать высоту. if ($ (window) .width ()! = width) {}
добавлено автор Imran Bughio, источник
Спас мой день! Мне нужно только проверить ширину
добавлено автор Yuriy Kvartsyanyy, источник

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

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

Related artcile: https://developers.google.com/web/updates/2016/12/url-bar-resizing

С уважением!

28
добавлено
Хорошо замечаю! Это должен быть правильный ответ!
добавлено автор evilReiko, источник
Является ли это предполагаемым поведением или нет, мы не хотим, чтобы он запускал функцию изменения размера. Итак, каково решение здесь, не спускаясь по пути длинного извилистого кода, предложенного другими ответами?
добавлено автор Studocwho, источник
Я добавил ссылку на мой ответ, в которой содержится дополнительная информация о том, как справиться с этим поведением в Chrome для мобильных устройств.
добавлено автор AlbertoFdzM, источник

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

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

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
    }
}       
</div> </div>
3
добавлено
Я думаю, вы должны использовать $ (window) .height() not $ (document) .height() и width.
добавлено автор Tarek El-Mallah, источник

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

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

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

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

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

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

1
добавлено
мое предложение было бы опустить проверку высоты и проверить только ширину.
добавлено автор bertie, источник

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

I know it's not ideal to link to an external resource, but QuirksMode has a readable table that I don't want to duplicate (or maintain) here: http://www.quirksmode.org/dom/events/resize_mobile.html

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

0
добавлено

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

0
добавлено

This is a duplicate of Javascript resize event on scroll mobile

In order to fix it, use onOrientationChange and window.orientation property. See the related answer: here

0
добавлено
Неправильно. Этот вопрос связан с неожиданным запуском события изменения размера в мобильном браузере.
добавлено автор user2867288, источник
Собственно, это не обязательно неверно. использование onOrientationChange является законным обходным решением, так как на мобильном устройстве, когда вы, скорее всего, увидите экран с изменением размера. Этот ответ в порядке. Я не заставляю это просто потому, что есть другой случай, который это не поймает - и это происходит, когда появляются/исчезают хронология браузера, вызывая изменения размера (что является моей проблемой ATM). В противном случае это было бы прекрасным решением.
добавлено автор dudewad, источник
Mobile Dev Jobs — вакансии и аналитика
Mobile Dev Jobs — вакансии и аналитика
6 187 участник(ов)

Публикуем вакансии и запросы на поиск работы по направлению iOS, Android, Xamarin и т.д. ВАЖНО: Правила публикации и правила канала: Ссылка – https://telegra.ph/Pravila-oformleniya-vakansij-i-rezyume-11-09-2

Android Developers
Android Developers
4 476 участник(ов)

Общаемся на темы, посвященным Android-разработке, SDK, Kotlin, Realm и т.д.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

Android Architecture
Android Architecture
2 186 участник(ов)

Русскоязычный чат по архитектуре в андроид приложениях. Подробнее: http://telegra.ph/Android-Architecture-12-24

rus-speaking/android
rus-speaking/android
1 705 участник(ов)

Основной чат по Android разработке (вопрос-ответ). ПРАВИЛА: bit.ly/andr-rules. NEWS: bit.ly/AnrdResId ЧАТЫ: Основной: bit.ly/andr-main IDE, сборка, Git, сервисы: bit.ly/andr-tools Оффтоп: bit.ly/andr-offtop Конференции, события: bit.ly/andr-events Вакансии, найм: bit.ly/andr-job Архитектура: bit.ly/andr-patterns Rx: bit.ly/andr-rx Тестирование: bit.ly/andr-test Kotlin: bit.ly/andr-kotlin Хаmarin: bit.ly/andr-xamarin За мат, спам, агрессию, предложения о работе, оффтоп в этом канале - бан на сутки и более ☢☢☢

Android Dev Подкаст
Android Dev Подкаст
1 325 участник(ов)

Комната для обсуждения Android Dev подкаста apptractor.ru/AndroidDev/ Общее обсуждение Android: https://t.me/android_ru Остальные чаты про Android: http://t.me/devChats Наши новости https://t.me/androiddevpodcast_news

Android Guards
Android Guards
602 участник(ов)

Обсуждение любых вопросов касающихся безопасности Android. - Защита системы и приложений - Уязвимости и эксплойты - Вредоносное ПО - Копание в кишках системы и приложений (RE)

Android JOB
Android JOB
466 участник(ов)

Публикуем вакансии и запросы на поиск работы по направлению Android (full-time, part-time, remote и разовые подработки)

AndroidDev :: Разработка. It's Android time now!
AndroidDev :: Разработка. It's Android time now!
458 участник(ов)

It's Android time now! Чат разработчиков Android. Вакансии, резюме и информацию о митапах размещать можно. Публикацию скрытой и явной рекламы ваших каналов и сайтов после получения разрешения от @olegushakov

Aandroid Talks!
Aandroid Talks!
212 участник(ов)

Чат об общих вопросах по ОС Android. Чат для разработки под андроид - pro.android: https://t.me/joinchat/AAAAAEKIFKnmRT9cMebb9w

Android Rus
Android Rus
68 участник(ов)