Bootstrap轮播在iPhone 6s上的每个图像之间都有空白区域

Question

当我仅在纵向上观看iPhone上的旋转木马时，每张图像之间都有空白区域。我已尝试过stackoverflow上其他类似问题的答案，但没有一个有效。这是我的测试网站： http://dexydemo.com/test/

#slidercontainer {
  max-width:100%;
	margin:0 auto 0 !important;
}

/*   ********************************* CAROUSEL *************************************************** */


.carousel-indicators {
	display:none;
}
	
.carousel-inner .item {
  max-height: 680px;
}

.carousel-inner .item:after {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.carousel-control {
  width: 10%;
  color:#fff !important;
}

.carousel-control .fa {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}
.carousel-control .fa.fa-chevron-right {
  right: 50%;
  margin-right: -10px;
}



/* ************************** Slider caption ************************** */

.carousel-caption {
   top: 16%;
}
  
.carousel-caption h2 {
  color: #fff;
  font-family:Oswald;
  font-size: 4.0vw;
  font-weight:700;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.carousel-caption p {
  font-family: Roboto;
  font-weight: 500;
  font-size: 2.5vw;
  margin-bottom: 2.5vw;
}

/**
 * Change animation duration
 */
.animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

@media only screen and (min-width:1241px) and (max-width: 1440px) {
	
.carousel-caption {
	top:13% !important;

}	
}

@media only screen and (min-width:1111px) and (max-width: 1240px) {

.carousel-caption {
	top:10% !important;

}	
}

@media only screen and (min-width:891px) and (max-width: 1110px) {

.carousel-caption {
	top:5%;
}
}


@media only screen and (min-width:751px) and (max-width: 890px) {

.carousel-control .fa-chevron-left {
   margin-left:50% !important;
}

.carousel-control .fa.fa-chevron-right {
  right: 50% !important;
  margin-right: -10px !important;
}
	
.carousel {
    width:110% !important;
	overflow: hidden !important;
	right:10% !important;
}

.carousel-caption {
	top:-3% !important;
	right:8% !important;
}
  
.carousel-caption h2 {
  font-size: 6.2vw !important;
   margin-bottom: 15px !important;
}

.carousel-caption p {
  font-size: 4.5vw !important;
  margin-bottom: 4.8vw !important;
}

}


@media only screen and (min-width:550px) and (max-width: 750px) {

.carousel-control .fa-chevron-left {
   margin-left:50% !important;
}

.carousel-control .fa.fa-chevron-right {
  right: 50% !important;
  margin-right: -10px !important;
}
	
.carousel {
    width:110% !important;
	overflow: hidden !important;
	right:10% !important;
}

.carousel-caption {
	top:0 !important;
	right:8% !important;
}
  
.carousel-caption h2 {
  font-size: 5.0vw !important;
   margin-bottom: 15px !important;
}

.carousel-caption p {
  font-size: 4.5vw !important;
  margin-bottom: 4.8vw !important;
}

}

@media only screen and (min-width:421px) and (max-width: 549px) {
	
.carousel-control .fa-chevron-left {
   margin-left:150% !important;
}

.carousel {
    width:130% !important;
	overflow: hidden !important;
	right:30% !important;
}

.carousel-caption {
	top:0% !important;
	right:-10% !important;
}
  
.carousel-caption h2 {
  font-size: 4.8vw !important;
   margin-bottom: 15px !important;
}

.carousel-caption p {
  font-size: 4.5vw !important;
  margin-bottom: 4.8vw !important;
}

}

@media only screen and (min-width:321px) and (max-width: 420px) {

.carousel-control .fa-chevron-left {
   margin-left:150% !important;
}

.carousel {
    width:130% !important;
	overflow: hidden !important;
	right:30% !important;
}

.carousel-caption {
	top:-13% !important;
	right:-10% !important;
}

.carousel-caption h2 {
  font-size: 4.8vw !important;
   margin-bottom: 15px !important;
}

.carousel-caption p {
  font-size: 4.3vw !important;
  margin-bottom: 4.8vw !important;
}

}

@media screen and (max-width: 320px){
	
.carousel-control .fa-chevron-left {
   margin-left:150% !important;
}

.carousel {
    width:130% !important;
	overflow: hidden !important;
	right:30% !important;
}

.carousel-caption {
	top:-18% !important;
	right:-10% !important;
}

  
.carousel-caption h2 {
  font-size: 4.8vw !important;
   margin-bottom: 15px !important;
}

.carousel-caption p {
  font-size: 4.5vw !important;
  margin-bottom: 4.8vw !important;
}

}

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet"/>
<div id="slidercontainer">

<div class="carousel slide" id="img-carousel" data-ride="carousel">

  <ol class="carousel-indicators">
    <li class="active" data-target="#img-carousel" data-slide-to="0"></li>
    <li data-target="#img-carousel" data-slide-to="1"></li>
    <li data-target="#img-carousel" data-slide-to="2"></li>
    <li data-target="#img-carousel" data-slide-to="3"></li>
  </ol>

  <div class="carousel-inner" role="listbox">
  
      <div class="item active"><img src="http://dexydemo.com/test/images/001.jpg" alt="">
      <div class="carousel-caption">
        <h2 class="animated fadeInDown">Personal Injury Lawyers</h2>
        <p class="animated fadeInUp">Call</p>
        <p class="animated fadeInUp">FREE CASE REVIEW</p>
      </div>
    </div>

    <div class="item"><img src="http://dexydemo.com/test/images/002.jpg" alt="">
      <div class="carousel-caption">
        <h2 class="animated fadeInDown">We&#8217;ll Fight To Get You Money </h2>
        <p class="animated fadeInUp">Call</p>
        <p class="animated fadeInUp">FREE CASE REVIEW</p>
      </div>
    </div>

    <div class="item"><img src="http://dexydemo.com/test/images/003.jpg" alt="">
      <div class="carousel-caption">
        <h2 class="animated fadeInDown">You Pay No Fee Unless We Win</h2>
        <p class="animated fadeInUp">Call</p>
        <p class="animated fadeInUp">FREE CASE REVIEW</p>
      </div>
    </div>
    
  </div>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
</div>
</div>