jQuery的窗口寬度不工作在某些斷點

Question

我寫了一個腳本，從窗口的寬度基於文件加載一些HTML。

的問題是，在某些點它無法工作

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(); 
}); 

於是問題就來了周圍的寬度

• 1281px到1295px - 負載tab.html但應該sektop.html加載
• 770px 785px - 加載mobile.html，但應加載tab.html

請他lp

Answer 1

的像素範圍，您的代碼失敗，指向滾動條的寬度。

事實上，你需要使用window.innerWidth得到實際使用的視口。

所以var winWidth = window.innerWidth;

最後，你也應該打電話給你的代碼時，DOM是準備好了，所以

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

Answer 2

您需要將所有內容都包含在$(window).on('load resize', function() { ... });事件處理函數中，以便在頁面load和resize事件中運行此代碼。

我還要某處跟蹤狀態，使用戶免於不必要的射擊$.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>