旋转设备方向时，iOS中的JSSOR滑块无法正确调整大小

Question

I'm designing a responsive site and using a jssor slider. The slider is responsive and works well with the following in the head:

<meta name="viewport" content="width=device-width>

When I edit this snippet, as below, the slider does not resize properly in iOS when rotating the device from landscape to portrait (and vice versa):

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

I'm trying to prevent iOS from zooming in while in landscape.

You can see an example of this problem when opening this page on an iOS device or simulator and changing the device orientation back and forth. The slider opens/loads properly in both landscape and portrait. The problem is only when the device is rotated.

This is the portion of the script that controls the resize/responsiveness:

$JssorSlider$("slider2_container", options);
        function ScaleSlider() {
            var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth;
            if (parentWidth)
                jssor_slider2.$ScaleWidth(Math.min(parentWidth, 1024));
            else
                window.setTimeout(ScaleSlider, 30);
        }

        ScaleSlider();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
    });

Answer 1

Please handle orientationchange event

    function ScaleSlider() {
        var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth;
        if (parentWidth)
            jssor_slider2.$ScaleWidth(Math.min(parentWidth, 1024));
        else
            window.setTimeout(ScaleSlider, 30);
    }

    ScaleSlider();
    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);