Photo by Julie Tupas on Unsplash

jQuery resize refresh issue_220825

제이쿼리의 반응형을 즉각 적용시키기 위해 resize시 새로고침(onload)를 사용하게 되면, PC에서는 문제가 없으나 모바일에서 스크롤시 새로고침 메소드가 적용되는 충돌이 있습니다.
해당 문제를 해결하기 위해 윈도우의 사이즈를 재차 확인하는 if문을 사용하면 해결이 가능합니다.

모바일 최상단 스크롤시 새로고침 막기

제이쿼리 resize 메소드 사용시 새로고침 되는 문제와 관계는 없습니다.

CSS 속성으로서, body{overscroll-behavior: contain;} 를 사용하면 모바일 스크롤을 최상단 위로 끌어올려도 새로고침이 적용되지 않습니다.

모바일 스크롤 시 새로고침 (resize 충돌 해결)

해결방법 01

Cache the width of the viewport and on resize return false if the width is still the same. A small jQuery snippet:

• 뷰포트의 너비를 캐시하고 너비가 여전히 동일한 경우 크기 조정 시 반환 false를 반환합니다.

var cachedWidth = $(window).width();
$(window).resize(function(){
  var newWidth = $(window).width();
  if(newWidth !== cachedWidth){
    //DO RESIZE HERE
    cachedWidth = newWidth;
  }
});

• 추가적으로 마지막 사이즈 조절 시간에 따라 새로고침 되는 코드입니다.

var cachedWidth = $(window).width();
    $(window).resize(function(){
        var newWidth = $(window).width();
        if(newWidth !== cachedWidth){
        //새로고침 코드================
        var delay = 300;//resize 종료 후 0.3초마다 새로 고침
        var re_timer = null;
        $(window).on('resize', function(){
            clearTimeout(re_timer);
            re_timer = setTimeout(function(){
            document.location.reload();
            }, delay);
        });
				//===================
            cachedWidth = newWidth;
        }
    });

출처) https://stackoverflow.com/questions/9361968/javascript-resize-event-on-scroll-mobile

해결방법 02

• solutions) This script reloads a webpage when the window size
  is changed. There is a 1000 ms delay to make sure the website is only reloaded after the resize took place. In order to prevent page-reload on mobile scroll events, I added this piece of code. It checks for the window-size if it really got changed.
• 이 스크립트는 창 크기가 변경되면 웹 페이지를 새로고침합니다.크기가 조정된 후에만 웹 사이트가 새로고침되는지 확인하는 데 1000ms의 지연이 있습니다.모바일 스크롤 이벤트에서 페이지 새로고침을 방지하기 위해 이 코드를 추가했습니다.윈도우 사이즈가 실제로 변경되었는지 확인합니다.

var dwidth = jQuery(window).width();
jQuery(window).bind('resize', function(e){

    var wwidth = jQuery(window).width();

    if(dwidth!==wwidth){
     dwidth = jQuery(window).width();

    if (window.RT) clearTimeout(window.RT);
    window.RT = setTimeout(function(){
        this.location.reload(false); /* false to get page from cache */
    }, 1000);
}
});

사용해보진 못하였지만 참고 하면 좋을 것 같습니다.

출처)https://wp-qa.com/jquery-reload-on-window-resize-loop-on-mobile-devices