모바일 크롬, 스크롤로 이벤트 크기 조정

모바일 크롬, 스크롤로 이벤트 크기 조정

갤럭시 S4, 안드로이드 4.2.2에서 크롬 모바일 브라우저를 사용하고 있는데 어떤 이유에서인지 페이지를 스크롤할 때마다 jquery.cycle2 슬라이드쇼에서 이미지의 스케일링으로 확인된 크기 조정 이벤트가 발생합니다.

왜 이런 일이 벌어지는지 아십니까?

이상하게 들리지만, 다른 브라우저에서도 본 적이 있습니다.이렇게 하면 됩니다.

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

그러면 이벤트 핸들러 크기 조정에서 수행할 수 있습니다.

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

저는 당신의 기능의 범위와 그 모든 것을 모르지만, 당신은 이것으로부터 요점을 얻어야 합니다.

그냥 궁금해서 재현해보려고 했는데 맞다면 내비게이션 크롬바 때문입니다.

스크롤을 아래로 내리고 크롬으로 브라우저 탐색바를 숨기면 창 크기가 나오지만, 브라우저 탐색바의 여유 공간으로 인해 창 크기가 커지기 때문에 그렇습니다.

관련기사 : https://developers.google.com/web/updates/2016/12/url-bar-resizing

이 동작을 피하기 위해 CWitty 응답을 고려합니다.

여전히 흥미로운지는 모르겠지만 제 해결책은 :)

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

모바일 장치의 브라우저는 누군가가 아래로 스크롤할 때 수평 상단 탐색 모음을 숨기고 위쪽으로 스크롤할 때 다시 표시합니다.이 동작은 클라이언트 크기에 영향을 미쳐 크기 조정 이벤트가 발생합니다.높이 변화 때문에 또는 적어도 높이 변화 때문에 코드를 실행하지 않도록 제어하기만 하면 됩니다.

불이 날 수 있는 것들이 많이 있는 것으로 드러났습니다.resize다양한 모바일 브라우저에서.

외부 리소스에 연결하는 것이 이상적이지 않다는 것을 알고 있지만 QuicksMode에는 복제(또는 유지)하고 싶지 않은 읽기 쉬운 테이블이 있습니다. http://www.quirksmode.org/dom/events/resize_mobile.html

예를 들어, 많은 브라우저에서 소프트 키보드를 여는 것이 이벤트를 발생시킵니다.

해당 질문은 이미 답변이 완료되었지만, 이 질문은 응답 사이트에 대한 질문을 제기하지 않으므로 이에 대한 정보를 추가하고자 합니다.

반응형 웹사이트를 개발할 때 안드로이드의 크롬에서 이 문제가 발생했습니다.창 크기를 조정할 때 메뉴를 숨기고 싶지만(일부 디자인 요소는 적절한 위치 지정이 필요하기 때문에) 스크롤에서 크기 조정 이벤트를 트리거하는 안드로이드 동작용 크롬 때문에 다소 어려움이 있었습니다.

OrientationChange에서 사용을 시작하는 것은 응답 사이트이기 때문에 선택 사항이 아니었습니다. 데스크톱 PC에서는 OrientationChange를 사용하지 않지만 일반 PC, 태블릿 및 스마트폰 모두에서 작동하려면 코드가 필요했습니다.

브라우저 스니핑 등을 시작할 수 있었지만 지금까지는 피할 수 있었습니다.

저는 Cwitty에서 제안한 솔루션을 구현하려고 했지만, 위 아래로 스크롤하면 실제로도 작동하지 않는 높이 변경이 발생합니다.

결국 높이가 바뀌었을 때가 아니라 폭이 바뀌었을 때만 메뉴를 숨기는 조건을 추가하게 되었습니다.제 경우에는 폭이 바뀌어야 메뉴를 다시 쓰면 되기 때문에 이 방법이 가능합니다.

스크롤 모바일에서 자바스크립트 크기 조정 이벤트를 중복한 것입니다.

수정하려면 OrientationChange와 window.Orientation 속성을 사용합니다.관련 답변 참조: 여기

언급URL : https://stackoverflow.com/questions/17328742/mobile-chrome-fires-resize-event-on-scroll