[android] 모바일 크롬이 스크롤시 크기 조정 이벤트를 발생시킵니다.

Program / 글쓴이

나는 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
}

I don’t know the scope of your functions and all that, but you should get the gist from this.

답변

I don’t know is it still interesting, but My solution is : )

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
    }
}

Expand snippet

답변

The question has already been answered, but since this question do not bring up the question of responsive sites I would like to add some information on that.

I encountered this issue in Chrome on android when developing a responsive web site. When resizing the window I want to hide the menus (due to some design elements needing proper positioning) but the Chrome for android behaviour to trigger a resize event on scroll made that somewhat difficult..

Switching to start using onOrientationChange was not an option since this is a responsive site, there is no orientation change on a desktop PC, but I still needed the code to work on both regular PC:s, tablets and smartphones.

I could had started to do browser sniffing and such but I have so far been able to avoid that..

I tried to implement the solution suggested by CWitty but since scrolling up or down in fact triggers a height-change that did not work either.

I ended up adding a condition that only hides the menu when the width is changed, not when the height has changed. This works in my case since I only need to rewrite the menu when the width is changed.

답변

Browsers in mobile devices often hide their horizontal top navigation bar when someone scrolls down, and show it again when scrolling up. This behavior affects the size of the client, firing the resize event. You just need to control not executing your code because of height changes or, at least, because of that height change.

답변

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

답변

Turns out there are many things which can fire resize in various mobile browsers.

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

Just to give an example, the one that was getting us: apparently in many browsers, opening the soft keyboard fires the event.