jquery window width not working at some breakpoints

Question

I wrote a script that loads some html from files based on the width of window.

The problem is that at some points it fails to work

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

So the problem comes around width

• 1281px to 1295px - loads tab.html but should load sektop.html
• 770px 785px - loads mobile.html but should load tab.html

Please help

Answer 1

The pixel range, that your code fails, points to the scrollbar width.

Indeed, you need to use window.innerWidth to get the actual viewport used.

So var winWidth = window.innerWidth;

Finally you should also call you code when the dom is ready, so

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

Answer 2

You need to wrap everything in a $(window).on('load resize', function() { ... }); event handler so that this code runs when the page loads and on the resize event.

I would also track the state somewhere so that you aren't unnecessarily firing $.load() if what you want to load is already on the page.

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>