Swiper.js breakpoints not working on phone

Question

I am building a swiper slider and came across a weird bug.

When resizing the slider on my desktop, the breakpoints work perfectly fine. However, when I change to my phone and check there, it does not use my breakpoint values. Instead it is using the desktop values. When I turn my phone in landscape mode, the values from the breakpoints are loaded as expected.

Here is my slider code:

document.querySelectorAll(".slider-main_component.is--jobs-slider").forEach(function (slider) {
    const swiper = new Swiper(slider.querySelector(".swiper"), {
        slidesPerView: 3,
        spaceBetween: 38,
        speed: 300,
        slideToClickedSlide: true,
        followFinger: true,
        lazyPreloadPrevNext: 2,
        slideActiveClass: "is-active",
        slideDuplicateActiveClass: "is-active",
        breakpoints: {
          // mobile landscape
          478: {
            slidesPerView: 1,
            spaceBetween: 10
          },
          // tablet
          768: {
            slidesPerView: 2,
            spaceBetween: 24
          },
          // desktop
          1150: {
            slidesPerView: 3,
            spaceBetween: 38
          }
        },
        navigation: {
            nextEl: slider.querySelector(".swiper-next"),
          prevEl: slider.querySelector(".swiper-prev"),
          disabledClass: "is--disabled"
        }
    });
});