Question

我创建了一个有两个滑块的wordpress网站-一个仅在移动设备上显示，另一个在桌面上显示。滑块的当前相关源代码为（仅用于移动显示）：

<div data-id="91e39d5" class="elementor-element elementor-element-91e39d5 fixedbkg elementor-hidden-desktop elementor--v-position-top elementor--h-position-center elementor-widget elementor-widget-slides" data-element_type="slides.default">
                <div class="elementor-widget-container">
                    <div class="elementor-slides-wrapper elementor-slick-slider" dir="ltr">
            <div class="elementor-slides" data-slider_options="{&quot;slidesToShow&quot;:1,&quot;autoplaySpeed&quot;:3000,&quot;autoplay&quot;:true,&quot;infinite&quot;:true,&quot;pauseOnHover&quot;:false,&quot;speed&quot;:500,&quot;arrows&quot;:false,&quot;dots&quot;:false,&quot;rtl&quot;:false,&quot;fade&quot;:true}" data-animation="">
                <div class="elementor-repeater-item-c324989 slick-slide"><div class="slick-slide-bg"></div><div  class="slick-slide-inner"><div class="elementor-background-overlay"></div><div class="elementor-slide-content"><div class="elementor-slide-heading"><font dir="rtl"><font color="#ed6524">שוב</font> הפגישה לא התחילה בזמן?</font></div></div></div></div><div class="elementor-repeater-item-a74ff24 slick-slide"><div class="slick-slide-bg"></div><div  class="slick-slide-inner"><div class="elementor-background-overlay"></div><div class="elementor-slide-content"><div class="elementor-slide-heading"><font dir="rtl"><font color="#ed6524">שוב</font> הפגישה לא התחילה בזמן?</font></div><div class="elementor-slide-description"><BR><BR><a href="#arrowscrollmob" style="color:white"><div class="arrow bounce"><i class="fa fa-angle-down fa-5x" aria-hidden="true"></i></div></a>
</div></div></div></div><div class="elementor-repeater-item-15a3089 slick-slide"><div class="slick-slide-bg"></div><div  class="slick-slide-inner"><div class="elementor-background-overlay"></div><div class="elementor-slide-content"><div class="elementor-slide-heading"><font dir="rtl"><font color="#ed6524">שוב</font> הפגישה לא התחילה בזמן?</font></div><div class="elementor-slide-description"><BR><BR><a href="#arrowscrollmob" style="color:white"><div class="arrow bounce"><i class="fa fa-angle-down fa-5x" aria-hidden="true"></i></div></a>
</div></div></div></div><div class="elementor-repeater-item-20784b4 slick-slide"><div class="slick-slide-bg"></div><div  class="slick-slide-inner"><div class="elementor-background-overlay"></div><div class="elementor-slide-content"><div class="elementor-slide-heading"><font dir="rtl"><font color="#ed6524">שוב</font> הפגישה לא התחילה בזמן?</font></div><div class="elementor-slide-description"><BR><BR><a href="#arrowscrollmob" style="color:white"><div class="arrow bounce"><i class="fa fa-angle-down fa-5x" aria-hidden="true"></i></div></a>
</div></div></div></div>            </div>
        </div>

它还具有以下CSS：

.elementor-1063 .elementor-element.elementor-element-da9971b .slick-slide-inner
{
    background-image: linear-gradient(to top, rgba(28,34,38,1) 0%,rgba(0,0,0,0) 70%) !important;

}

.elementor-1063 .elementor-element.elementor-element-fb358d5 .elementor-repeater-item-15a3089 .slick-slide-inner {
        background-image: linear-gradient(to top, rgba(28,34,38,1) 0%,rgba(0,0,0,0) 50%) !important;

}


.elementor-1063 .elementor-element.elementor-element-da9971b .elementor-slide-heading
{
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.9);

}
.elementor-1063 .elementor-element.elementor-element-fb358d5 .elementor-slide-heading
{
    text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.9);

}

.elementor-element .slick-slide-bg{
background-attachment:fixed;
background-position:center 85%;
}


@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 60px; /*change with size of arrow to make sit on bottom */
/*   background-image: url(); */
/*   background-size: contain; */
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

除了iOS手机以外，该滑块在所有显示器上看起来都很好。更改后的背景图片在使用Safari的任何iPhone设备上看起来都不太好。

以下是来自我的android的背景图片的示例：

这是我们检查过的任何iPhone上的样子：

我还尝试将以下代码添加到标题中，但没有帮助：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

下一步我该怎么做？

在iPhone上，Slider的背景图像看起来很糟糕

0 个答案: