如何在不丢失Jssor图像滑块的情况下更改其尺寸'其响应特性、图像纵横比等仅适用于iPhone设备

我正在开发的网站本质上是响应性的，即网站设计会根据浏览设备进行调整。我使用了引导框架。

我在我的网站上使用Jssor JQuery图像滑块。它在所有设备和所有流行的知名浏览器上都运行良好，非常适合我。我面临的唯一问题是，当在iPhone上查看时，Jssor滑块中滑动图像的大小应该改为460 px * 280 px。换句话说，Jssor图像滑块看起来应该比当前大小大一些。但在这样做的同时，滑块中出现的图像的纵横比应该保持不变。

此外，当在iPhone上查看网站时，图像滑块应占据整个水平屏幕。也就是说，图像滑块不应该在滑块周围出现任何空白。目前，两个垂直的空白条出现在滑块的两侧。

最初，当在PC或笔记本电脑上的浏览器上查看网站时，滑块图像的分辨率为940 px * 370 px，并根据浏览设备的大小进行自动调整。

上述尺寸变化只能发生在iPhone上，而不能发生在任何其他设备上。在其他设备上，它运行得非常好和完美。此外，图像的纵横比在该过程中不应受到干扰。

为了供您参考，我将滑块的HTML代码和jQuery代码放在下面。所有必要的库文件都已包含在内。

HTML代码：

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 940px; height: 370px; overflow: hidden; ">
      <div u="loading" style="position: absolute; top: 0px; left: 0px;">
        <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
        <div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%;height:100%;">
        </div>
      </div>     
      <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 940px; height: 370px; overflow: hidden;">
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Bud_Light_Lime_1413041685.jpg" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute; left:350px; bottom: 40px;  width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Finlandia_1413041875.jpg" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Three_Olives_1413042332.jpg" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute;left:350px; bottom: 40px;  width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Avalon_1413041406.jpg" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute; left:350px; bottom: 40px; width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
        <div>
          <img u="image" src="http://smartrebate.eywaharvest.com/images/brands/Brancott_1413042551.JPG" />
          <div u=caption t="*" class="captionOrange"  style="position:absolute;left:350px; bottom: 40px;  width:300px; height:30px;"> 
            slideshow transition twins
          </div>
        </div>
      </div>        
      <div u="navigator" class="jssorb05" style="position: absolute; bottom: 16px; right: 6px;">           
        <div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
      </div>        
      <style>
      .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
        background: url(img/b05.png) no-repeat;
        overflow: hidden;
        cursor: pointer;
      }
      .jssorb05 div {
        background-position: -7px -7px;
      }
      .jssorb05 div:hover, .jssorb05 .av:hover {
        background-position: -37px -7px;
      }
      .jssorb05 .av {
        background-position: -67px -7px;
      }
      .jssorb05 .dn, .jssorb05 .dn:hover {
        background-position: -97px -7px;
      }
      .jssora12l, .jssora12r, .jssora12ldn, .jssora12rdn {
        position: absolute;
        cursor: pointer;
        display: block;
        background: url(img/a12.png) no-repeat;
        overflow: hidden;
      }
      .jssora12l {
        background-position: -16px -37px;
      }
      .jssora12r {
        background-position: -75px -37px;
      }
      .jssora12l:hover {
        background-position: -136px -37px;
      }
      .jssora12r:hover {
        background-position: -195px -37px;
      }
      .jssora12ldn {
        background-position: -256px -37px;
      }
      .jssora12rdn {
        background-position: -315px -37px;
      }
      .captionOrange, .captionBlack {
        color: #fff;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
      }
      .captionOrange {
        background: #EB5100;
        background-color: rgba(235, 81, 0, 0.6);
      }
      .captionBlack {
        font-size:16px;
        background: #000;
        background-color: rgba(0, 0, 0, 0.4);
      }
      a.captionOrange, A.captionOrange:active, A.captionOrange:visited {
        color: #ffffff;
        text-decoration: none;
      }
      a.captionOrange:hover {
        color: #eb5100;
        text-decoration: underline;
        background-color: #eeeeee;
        background-color: rgba(238, 238, 238, 0.7);
      }
      .bricon {
        background: url(img/browser-icons.png);
      }
    </style>       
    <span u="arrowleft" class="jssora12l" style="width: 30px; height: 46px; top: 123px; left: 0px;"></span>
    <span u="arrowright" class="jssora12r" style="width: 30px; height: 46px; top: 123px; right: 0px"></span>        
      <a style="display: none" href="http://www.jssor.com">javascript</a>
    </div>

jQuery代码：

<script>
    jQuery(document).ready(function ($) {
      var _SlideshowTransitions = [{ $Duration: 1200, $Opacity: 2 }];
      var options = {
        $AutoPlay: 1,                                    
        $AutoPlaySteps: 1,                                  
        $Idle: 3000,                            
        $PauseOnHover: 1,                               
        $ArrowKeyNavigation: true,                          
        $SlideDuration: 500,                                
        $MinDragOffsetToSlide: 20,                          
        $SlideSpacing: 0,                                   
        $Cols: 1,                                  
        $Align: 0,                                
        $UISearchMode: 1,                                   
        $PlayOrientation: 1,                                
        $DragOrientation: 3,                                
        $SlideshowOptions: {                                
          $Class: $JssorSlideshowRunner$,                 
          $Transitions: _SlideshowTransitions,            
          $TransitionsOrder: 1,                           
          $ShowLink: true                                    
        },
        $BulletNavigatorOptions: {                                
          $Class: $JssorBulletNavigator$,                       
          $ChanceToShow: 2,                               
          $Steps: 1,                                      
          $Rows: 1,                                      
          $SpacingX: 10,                                   
          $SpacingY: 10,                                   
          $Orientation: 1                                 
        },
        $ArrowNavigatorOptions: {
          $Class: $JssorArrowNavigator$,              
          $ChanceToShow: 2,                               
          $Steps: 1                                       
        }
      };
      var jssor_slider1 = new $JssorSlider$("slider1_container", options);
      function ScaleSlider() {
        var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
        if (parentWidth)
          jssor_slider1.$ScaleWidth(Math.min(parentWidth, 940));
        else
          window.setTimeout(ScaleSlider, 30);
        }
        ScaleSlider();
        if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
          $(window).bind('resize', ScaleSlider);
        }       
    });
    </script>