jquery window 宽度在某些断点处不起作用

Question

我写了一个脚本，根据 window 的宽度从文件中加载一些 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

请帮忙

Answer 1

您需要将所有内容包装在 $(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>

Answer 2

您的代码失败的像素范围指向滚动条宽度。

确实，您需要使用 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');
})

jquery window 宽度在某些断点处不起作用

jquery window width not working at some breakpoints

javascript

css

jquery

document-body

outerwidth