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

嗨，我想知道是否有人可以帮助我。目前我有一个Nivo Slider，Nivo Caption设置为显示：无;在一定的屏幕尺寸。它引起了我的注意，对于某些人来说，似乎像iPhones，标题显示，并在右侧创建一个空白区域（对于当前大小而言太大），直到刷新。有没有更好的方式来摆脱手机元素？隐藏移动设备的Nivo滑块标题

谢谢。 Al。

来源

2013-04-25 Allan

任何代码，我们可以看到？ – melancia 2013-04-25 12:47:49

我不确定看代码是否会实现很多。我可以给你一个链接到该网站 - [链接]（http://www.clickstream.ie/index.php） - 显示：无;做它应该的，但显然在iPhone上它仍然可见（有时），直到页面刷新， – Allan 2013-04-25 13:06:31

您正在覆盖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：block;

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

来源

2013-04-25 13:12:40 melancia

感谢。我有3个样式表，CSS代码的位置是HTML中的最后一个样式表。在底部，我有一个媒体查询 '.nivo-caption \t { display：none; }' 所以我认为应该覆盖它。我已经删除了'display：block'，它似乎仍然可以在桌面上正常工作，您认为这可以解决问题吗？我现在将看一个jQuery方法（可能是最好的，但可能需要更多的帮助） – Allan 2013-04-25 13:25:17

我不确定智能手机浏览器的媒体查询兼容性如何，所以如果你通过modernizr检测+一些简单的jQuery，肯定会起作用。 – melancia 2013-04-25 13:30:05

感谢您的帮助Melancia – Allan 2013-04-25 13:47:16

在jquery.nivo.slider.js

地址：

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

来源

2014-08-16 14:44:58

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

回答

相关问题