2015-09-24 67 views
0

目標:
當您的計算機或手機中的分辨率低於500時,我想要刪除圖標圖片,並且其功能不能處於活動狀態。刪除圖標及其功能

問題:
我不知道該怎麼做。

信息:

http://jsfiddle.net/sL3c1v12/14/ 

的源代碼是從本網站http://markgoodyear.com/labs/scrollup/

+0

使用媒體查詢來解決@media屏幕和(最小分辨率:499dpi){刪除圖標的代碼...} – Sumanta736

+0

問題Sumanta - 我不知道如何處理javascript向上滾動)和@media屏幕? –

回答

0

您可以使用CSS Media Queries事情顯示如何根據可用的屏幕大小改變。

如果您有相關​​類的圖標或圖像:

.my-icon { 
    width: 40px; 
    height: 40px; 
} 

你可以使用一個媒體查詢隱藏它時,可用屏幕寬度小於500像素:

@media (max-width: 500px) { 
    .my-icon { 
    display: none; 
    } 
} 
+0

這隻適用於寬度而不是分辨率。 – Sumanta736

+0

你們可以提供一個具體的例子,使用jsfiddle來了解更好的源代碼嗎? –

0

你不能在這裏使用CSS媒體查詢,因爲它仍然會出現在JavaScript中。 可以使用檢查窗口寬度的JavaScript雖然喜歡:

// Ensure that only one scrollUp exists 
    if (!$.data(document.body, 'scrollUp')) { 
     $.data(document.body, 'scrollUp', true); 
     if ($(window).width() > 500) 
      $.fn.scrollUp.init(options); 
    } 

這裏你可以看到一個工作版本:http://jsfiddle.net/sL3c1v12/21/

編輯新的小提琴

新撥弄在onResize例如:http://jsfiddle.net/sL3c1v12/32/

使用:window.screen.width而不是分辨率。

+0

我試過你在jsfiddle中的解決方案,但它不起作用。請記住,如果可能的話,我不想在javascript內更改scrollup的源代碼。 –

+0

對我來說,它工作(在Firefox上),請注意,它需要窗口寬度,所以也許你需要使500更大,或窗口更小,看看它的工作。 –

+0

它的工作原理,但你需要更新瀏覽器才能正常工作。無需刷新網頁,通過用光標調整瀏覽器寬度大小可以不顯示它? –