Jssor：div不是在加载时缩放，而是在仅在移动设备中调整事件大小

Question

如果我在移动浏览器中加载jssor，则表示它未按我的要求缩放。实际上我喜欢在加载和调整大小时在y轴上缩放div。但在移动加载时它不起作用，但如果我旋转（调整大小触发此处）移动改变方向它正如我预期的那样工作。这里是样本图片（为了说明目的，比x缩放了10倍）。

加载时

实际

预期：

这是我的代码：

对于Y轴缩放：

function jssorResolutionAdjustor(id)
    {
        setTimeout(function() {

            var idObj = $('#' + id);
            var immediateChild = idObj.children('div');
            var transformMatrix = '';
            var transformMatrixValues = '';
            var transformCss = '';
            transformMatrix = immediateChild.css('transform');

            transformMatrixValues = transformMatrix.match(/-?[\d\.]+/g);

            if (transformMatrixValues !== null)
            {
                var scaleXValue = transformMatrixValues[0];
                var scaleXValueFixed = parseFloat(scaleXValue).toFixed(2);
                var scaleYValue = (scaleXValue * 10.2).toFixed(2);

                if (scaleXValueFixed >= 0.75)
                {
                    scaleYValue = 1;
                }

                if ('WebkitTransform' in document.body.style)
                {
                    transformCss = {'-webkit-transform': 'scale(' + scaleXValue + ',' + scaleYValue + ')'};

                    if ('transform' in document.body.style)
                    {
                        transformCss = {'tansform': 'scale(' + scaleXValue + ',' + scaleYValue + ')'};
                    }
                }
                else if ('MozTransform' in document.body.style)
                {
                    transformCss = {'-moz-transform': 'scale(' + scaleXValue + ',' + scaleYValue + ')'};
                }
                else if ('transform' in document.body.style)
                {
                    transformCss = {'tansform': 'scale(' + scaleXValue + ',' + scaleYValue + ')'};
                }

                $(immediateChild).css(transformCss);
            }
        }, 0);
    }

带有上述函数的

jssor：

function mediaAcceptanceImageJssor()
{
    var slides = $('#jssor_media_acceptance_image_gallery_slides>div');
    var slideCount = slides.length;
    var thumbNailNavigatorChanceToShow = slideCount < 2 ? 0 : 2;
    var _CaptionTransitions = [];
    _CaptionTransitions["MCLIP|B"] = {$Duration: 600, $Clip: 8, $Move: true, $Easing: $JssorEasing$.$EaseOutExpo};

    var displayPieces = 4;
    var arrowNavigatorSteps = 3;
    if (navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
        displayPieces = 2;
        arrowNavigatorSteps = 1;
    }

    var options = {
        $AutoPlay: true,
        $Loop: 0,
        $ThumbnailNavigatorOptions: {
            $Class: $JssorThumbnailNavigator$,
            $ChanceToShow: thumbNailNavigatorChanceToShow,
            $DisplayPieces: displayPieces,
            $SpacingX: 3, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: arrowNavigatorSteps                                      //[Optional] Steps to go for each navigation request, default value is 1
            }
        },
        $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$,
            $ChanceToShow: 0
        },
        $CaptionSliderOptions: {//[Optional] Options which specifies how to animate caption
            $Class: $JssorCaptionSlider$, //[Required] Class to create instance to animate caption
            $CaptionTransitions: _CaptionTransitions, //[Required] An array of caption transitions to play caption, see caption transition section at jssor slideshow transition builder
            $PlayInMode: 0, //[Optional] 0 None (no play), 1 Chain (goes after main slide), 3 Chain Flatten (goes after main slide and flatten all caption animations), default value is 1
            $PlayOutMode: 0                                 //[Optional] 0 None (no play), 1 Chain (goes before main slide), 3 Chain Flatten (goes before main slide and flatten all caption animations), default value is 1
        }
    };

    var jssorTagId = 'jssor_media_acceptance_image_gallery';
    jssor_slider_media_acceptance_image = new $JssorSlider$(jssorTagId, options);

    //responsive code begin
    //you can remove responsive code if you don't want the slider scales while window resizes
    function ScaleSlider() {
        var parentWidth = jssor_slider_media_acceptance_image.$Elmt.parentNode.clientWidth;
        //alert(parentWidth);
        if (parentWidth)
            jssor_slider_media_acceptance_image.$ScaleWidth(Math.min(parentWidth, 720));
        else
            window.setTimeout(ScaleSlider, 30);
    }

    ScaleSlider();

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

    jssorResolutionAdjustor(jssorTagId);
    $(window).resize(function() {
        jssorResolutionAdjustor(jssorTagId);
    });
    //responsive code end
}

Answer 1

请尝试禁用以下代码以查看其是否有效。

jssorResolutionAdjustor(jssorTagId);
$(window).resize(function() {
    jssorResolutionAdjustor(jssorTagId);
});