Мобільні хромові пожежі змінюють розмір події за прокручуванням

Я використовую браузер Chrom для мобільних пристроїв на галактиці 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
}

Я не знаю сфери ваших функцій і всього цього, але ви повинні отримати від цього.

59
додано
Дякую за відгук Кріса!
додано Автор CWitty, джерело
Проблема викликана тим, що смужка прокручування приховується або відображається, що призводить до зміни висоти екрана, а отже запускає $ (window) .resize() . Я запропонував редагувати.
додано Автор Sander Koedood, джерело
Просто хотів би додати, що ми також спостерігали подібну поведінку з iOS Safari.
додано Автор Kris Krause, джерело
це має бути || замість &&
додано Автор Maysam, джерело
оскільки це висота, яка змінює значення condition, якщо тільки потрібно перевірити зміну ширини. Також стан не спрацьовує, поки ширина і висота не змінюються. що не завжди так, але майже всі зміни розміру екрану пов'язані зі зміною ширини, тому я рекомендую не використовувати висоту частини. 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() не $ (document) .height() і ширина.
додано Автор 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, джерело
android_jobs_ua
android_jobs_ua
120 учасників

Публикуем вакансии и запросы на поиск работы по направлению Android. Здесь всё: full-time, part-time, remote и разовые подработки.

Mobile Dev Jobs UA
Mobile Dev Jobs UA
20 учасників

Публикуем вакансии и запросы на поиск работы по направлению iOS, Android, Xamarin, RN и т.д.