Mobile breakpoints with `items: 1` are broken

[on3dd]

Describe the bug Mobile breakpoints with items: 1 seem to be broken.

To Reproduce You can check it yourself in library docs using Chrome DevTools. In this example, responsive contains following breakpoint for mobile:

mobile: {
  breakpoint: {
    max: 464,
    min: 0
  },
  items: 1,
  partialVisibilityGutter: 30
},

But on iPhone SE it turns out with two columns (pic below).

Expected behavior There should be only one full width column.

Screenshots

[on3dd]

I figured out that it is kind of Chrome DevTools issue, see https://stackoverflow.com/questions/36297612/window-innerwidth-in-chromes-device-mode

I ran this library locally and modified Carousel's setItemsToShow according to this answer, and it worked perfectly (pic below).

public setItemsToShow(
  shouldCorrectItemPosition?: boolean,
  resetCurrentSlide?: boolean
): void {
    const { responsive } = this.props;
    Object.keys(responsive).forEach(item => {
      { ... }

      const widths = [window.innerWidth];

      if (window.screen && window.screen.width) {
          widths.push(window.screen.width);
      }

      const screenWidth = Math.min(...widths);

      if (screenWidth >= min && screenWidth <= max) { ... }
    });
  }

Not sure if it can break something, but maybe we could have this?

[pehovorka]

Hi, the change merged in #382 appears to have broken the behaviour on iOS/iPadOS devices in landscape orientation. These devices report window.screen as screen dimensions that are unchanged when switching between the portrait/landscape mode. Therefore, window.screen.width is always the dimension of the shorter side of the screen, even in landscape. The change introduced in #382 uses this value as the viewport width for choosing the responsive breakpoint.

Downgrading to 2.8.2 fixed the issue.