隱藏移動設備的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滑塊標題

回答

相關問題