Question

嗨，我想知道是否有人可以帮助我。目前我有一个Nivo Slider，Nivo Caption设置为display：none;在一定的屏幕尺寸。我注意到，对于某些人来说，似乎是iPhone，标题显示，并在右边创建一个空白区域（对于当前大小来说太大），直到刷新为止。有没有更好的方法来“摆脱”移动元素？

感谢。人

Answer 1

你正在覆盖CSS规则。

在样式表上的某个时刻，您有：

.theme-light .nivo-caption {
    display: none;
}

更进一步：

.nivo-caption {
    -moz-box-sizing: border-box;
    background: none repeat scroll 0 0 #000000;
    bottom: 10%;
    color: #FFFFFF;
    display: block;
    height: 66px;
    left: 0;
    opacity: 0.9;
    overflow: hidden;
    padding: 5px 10px;
    position: absolute;
    width: 440px;
    z-index: 8;
}

display：none;

然后

display：block;

我会采用jQuery方法来摆脱标题，根据屏幕大小甚至检测它是否是智能手机（modernizr）。

Answer 2

在jquery.nivo.slider.js

中

添加：

//Process  caption
        if ($(window).width() < 659) {
            $('.nivo-caption').hide();
        }
        else {
            processCaption(settings);
        }

隐藏移动设备的Nivo滑块标题

2 个答案: