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

Question

嗨，我想知道是否有人可以帮助我。目前我有一个 Nivo Slider，其中 Nivo Caption 设置为显示：无；在一定的屏幕尺寸下。我注意到，对于某些人来说，看起来就像 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;
}

显示：无；

进而

显示：块；

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

Answer 2

在 jquery.nivo.slider.js

添加：

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