jquery window width not working at some breakpoints

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

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