jQuery 창 너비가 일부 중단 점에서 작동하지 않습니다.

Question

윈도우의 너비에 따라 파일에서 일부 HTML을로드하는 스크립트를 작성했습니다.

문제는 몇 가지 점에서 그것은 그래서 문제가 주위에 온다

• 1281px 1295px에 폭

  var winWidth = $(window).width(); 
  //var winWidth = window.outerWidth; 
  //var winWidth = document.body.offsetWidth; 
  
  
      if((winWidth > 0) && (winWidth <= 767)){ 
       console.log('Mobile'); 
       $.ajax({ 
        url : "home-banner-parts/mobile.html", 
        dataType: "html", 
        success : function (data) { 
         $("#homeslider").html(data); 
        } 
       }); 
      } 
      if((winWidth >= 768) && (winWidth <= 1279)){ 
       console.log('Tab'); 
       $.ajax({ 
        url : "home-banner-parts/tab.html", 
        dataType: "html", 
        success : function (data) { 
         $("#homeslider").html(data); 
        } 
       }); 
      } 
      if((winWidth >= 1280)){ 
       console.log('Desktop'); 
       $.ajax({ 
        url : "home-banner-parts/desktop.html", 
        dataType: "html", 
        success : function (data) { 
         $("#homeslider").html(data); 
        } 
       }); 
      } 
  
  
  //the above code is wrapped in function 
  $(window).resize(function() { 
      console.log('Resizing'); 
      homeCarousel(); 
  }); 
  

  작동하지 것입니다 -로드 tab.html하지만 sektop.html

를로드한다
• 770x785 픽셀 - mobile.html을로드하지만 tab.html을로드해야합니다.

lp

Answer 1

픽셀 범위는 코드가 실패, 스크롤 폭 가리 킵니다.

실제로 사용 된 실제 뷰포트를 얻으려면 window.innerWidth을 사용해야합니다. DOM을가 준비되면

그래서 마지막으로 var winWidth = window.innerWidth;

당신은 또한 너무

function handleWindowSize(){ 
    // your code here 
} 
$(window).resize(function() { 
    console.log('Resizing'); 
    handleWindowSize(); 
    homeCarousel(); 
}); 
$(document).ready(function(){ 
    $(window).trigger('resize'); 
}) 

Answer 2

페이지 코드 load 및 resize 이벤트가 발생하면이 코드가 실행되도록 $(window).on('load resize', function() { ... }); 이벤트 처리기에서 모든 것을 줄 바꿈해야합니다.

로드하려는 내용이 이미 페이지에 있으면 $.load()을 불필요하게 실행하지 않도록 상태를 추적 할 수도 있습니다.

var $body = $('body'); 
 

 
    $(window).on('load resize', function() { 
 
     
 
     var winWidth = $(this).width(), 
 
      state = $body.data('state'); 
 

 
     console.log(winWidth); 
 

 
     if ((winWidth > 0) && (winWidth <= 767) && (state != 'mobile')) { 
 
     $body.data('state','mobile'); 
 
     console.log('Mobile'); 
 
     $.ajax({ 
 
      url: "home-banner-parts/mobile.html", 
 
      dataType: "html", 
 
      success: function(data) { 
 
      $("#homeslider").html(data); 
 
      } 
 
     }); 
 
     } 
 
     if ((winWidth >= 768) && (winWidth <= 1279) && (state != 'tab')) { 
 
     $body.data('state','tab'); 
 
     console.log('Tab'); 
 
     $.ajax({ 
 
      url: "home-banner-parts/tab.html", 
 
      dataType: "html", 
 
      success: function(data) { 
 
      $("#homeslider").html(data); 
 
      } 
 
     }); 
 
     } 
 
     if ((winWidth >= 1280) && (state != 'desktop')) { 
 
     $body.data('state','desktop'); 
 
     console.log('Desktop'); 
 
     $('bo') 
 
     $.ajax({ 
 
      url: "home-banner-parts/desktop.html", 
 
      dataType: "html", 
 
      success: function(data) { 
 
      $("#homeslider").html(data); 
 
      } 
 
     }); 
 
     } 
 
    })

body { 
 
overflow-y: scroll; 
 
min-height: 200vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>