JSSOR $ScaleWidth() 在 Android Chrome 上不起作用

Question

我一直在努力在网页上放置 2 个 JSSOR 滑块，总体而言，我很幸运，除了我发现我添加到页面的响应式代码在我的桌面上工作，但是当我测试时我的安卓，滑块没有调整大小。 div 是这样我可以输出调整大小的值，并且我确认 # 至少被正确传递。这是其中一个滑块的脚本，再次在桌面上工作，而不是在 android 上......（ps 在手机上我得到 360px 的 minSliderWidth 值..在我的桌面上我可以调整得更小）

<div id="value"></div>
<script type='text/javascript' src='/_scripts/jssor.slider.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
   <script>
        init_jssor_slider1 = function (containerId) {

        var options = {
            $Loop: 1,
            $DragOrientation: 1,
            $SlideDuration: 500,
            $ArrowNavigatorOptions: { 
                $Class: $JssorArrowNavigator$,
                $ChanceToShow: 2,
                $AutoCenter: 2,
                $Steps: 1
            }
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        //Responsive code
        function ScaleSlider() {

            var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;

            if (parentWidth) {
                minSliderWidth = Math.min(parentWidth, 482)

                document.getElementById("value").innerHTML = minSliderWidth;

                jssor_slider1.$ScaleWidth(minSliderWidth);
            }else{
                document.getElementById("value").innerHTML = Here;

                window.setTimeout(ScaleSlider, 30)
            }


        };

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

    };
</script>

相关的 CSS 是：

#slider1_container {
display:inline-block;
position: relative;
float: left;
width: 482px;
height: 626px;
overflow: hidden;}

#slider2_container {
display:inline-block;
position: relative;
float: right;
width: 482px;
height: 626px;
overflow: hidden;}

我已经尝试了所有方法，但我不明白为什么这在移动设备上不起作用，因为我已经按照我能找到的所有方法无济于事。具有讽刺意味的是，我最初是通过 CSS 构建它自己调整大小的滑块而不使用 $ScaleWidth()，但我不记得我是如何设置它的 :-)

Answer 1

请尝试使用类名而不是 id 设置 css 规则。

.slider1_container {
display:inline-block;
position: relative;
float: left;
width: 482px;
height: 626px;
overflow: hidden;}

.slider2_container {
display:inline-block;
position: relative;
float: right;
width: 482px;
height: 626px;
overflow: hidden;}

另外，如果您将slider1_container 放在另一个div 中，请为该div 设置overflow:hidden;。