In the slick-carousel slider, responsive does not work correctly. How to fix?

Question

JavaScript

There is such a code.

$('.last-reviews__items-wrap').slick({
        slidesToShow: 2,
        slidesToScroll: 2,
        infinite: true,
        accessibility: false,
        nextArrow: $('.slider-btn_dir_right.last-reviews__slider-btn'),
        prevArrow: $('.slider-btn_dir_left.last-reviews__slider-btn'),
        responsive: [
            {
                breakpoint: 993,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                }
            }
        ]
});

The goal is to make sure that only 1 slide can be seen in the slider at a width of 992 or less. At a width greater than 992 - two slides.
This code copes with this task, but with a caveat. If you reduce the browser window, then everything works as it should. If instead you turn on the view mode on mobile devices (Toggle device toolbar), then one slide is shown only at 968.
Why is that? How to fix it?

Answer 1

Add a meta tag to the head

<meta name="viewport" content="width=device-width, initial-scale=1">