전화가 JQuery와 기능

Question

내가 2의 경우 호출 등 숨어있는 팝업을 포함하여 내 웹 사이트에 특정 요소의 동작을 변경하는 기능 responsive 있습니다

$(document).ready(responsive); 
$(window).resize(responsive); 

을 문제에서 발생 안드로이드 크롬 실제로 화면의 높이를 변경하고 내 팝업을 닫습니다 responsive 기능을 트리거합니다 (일부는 입력 할 수 없게 만드는 텍스트 필드가 있음).

어떻게 이런 일이 일어나지 않도록 할 수 있습니까? 나는 안드로이드 가상 키보드가 너비가 아닌 화면의 높이 만 변경한다는 좋은 점을 읽었으므로 크기를 변경하기 전과 후에 너비를 비교하는 것이 좋을 것이라고 가정합니다. 이 함수를 사용하여 너비가 다르면 앞뒤의 너비를 비교하고 resize()을 실행했지만 예상대로 작동하지 않고 콘솔 높이 만 변경되었습니다 (크롬 개발자 사용). 도구).

무엇이 잘못되었거나 어떻게 기능을 막을 수 있습니까? 높이를 변경하면 responsive이 시작됩니다.

function resizeWidth() { 
    var existingWidth = $(document).width(); 

    $(window).resize(function() { 
     var newWidth = $(document).width(); 
     if (existingWidth != newWidth) { 
      $(window).resize(responsive); 
      console.log(existingWidth); 
      console.log(newWidth); 
     }; 
    }); 
}; 

$(window).resize(resizeWidth); 

Answer 1

먼저 처리기를 resize 이벤트에 여러 번 연결합니다. 하나가로드되면 마다마다 크기가 조정되고 resizeWidth이 호출됩니다. 해당 함수 내에서 핸들러를 제거해야합니다. 또한 너비가 변경 될 때 responsive() 함수를 호출하고 또 다른 크기 조정 핸들러를 부착하지 않으려한다고 가정합니다.

중요한 문제는 existingWidth의 범위가 여러 이벤트에서 볼 수있을 정도로 낮지 않다는 것입니다. 일반적으로 나쁜 습관으로 간주되지만 글로벌화 할 수 있습니다. 대신이처럼 data 속성을 사용할 수 있습니다

function resizeWidth() { 
    var existingWidth = $(document).data('resize-width'); 
    var newWidth = $(document).width(); 
    if (existingWidth != newWidth) { 
     responsive(); 
     $(document).data('resize-width', newWidth); 
    }; 
}; 

$(window).resize(resizeWidth);