如何隱藏div取決於屏幕尺寸的jQuery

我正在編寫一個響應式WordPress主題，並且在我想根據查看器的屏幕分辨率隱藏div的情況下。如何隱藏div取決於屏幕尺寸的jQuery

我在一個div中有一個來自BuySellAds的468px乘60px的廣告橫幅，我想將它從在智能手機或平板電腦上查看網站的觀衆中隱藏起來。

我試圖使用CSS3媒體查詢來實現這一點，但它沒有奏效。

這可以通過使用jQuery來實現嗎？如果是這樣，任何代碼指向我在正確的方向將不勝感激。

感謝

來源

2012-08-26 Jason

媒體查詢確實有效，並且是這方面的首選方法。你能發表你試過的嗎？ –

非常奇怪。我用媒體查詢通過使用這個查詢「#header_ad {display：none}」來試用它，但它不起作用。我現在再試一次，它的工作原理。使用FireFox – Jason

您可以從$(window)選擇取值。獲取當前價值;使用resize()方法：

Here is working jsFiddle.

var range = 200; 
//for getting begining values 
var windowW = $(window).height(); 
var windowH = $(window).width(); 
console.log(windowW+'X'+windowH); 

//for getting current values 
$(window).resize(function() { 
    var windowW = $(this).height(); 
    var windowH = $(this).width(); 
    console.log(windowW+'X'+windowH); 

    if(windowW < range) { 
     $('.ele').hide(); 
    }else{ 
     $('.ele').show(); 
    } 
});

編輯：你可以用純CSS3做到這一點還，使用這個CSS：

@media only screen and (min-width: 767px) { .ele { display:none; } }

我建議，如果你檢查這些答案的，想要更進一步jQuery滾動值：Setting CSS value limits of the window scrolling animation和How to build simple sticky navigation at the page bottum?

來源

2012-08-26 00:17:31

真棒謝謝你的提示答案 – Jason

你也應該調用調整大小函數onload，因此即使你不調整窗口的元素（S）隱藏 – orhanhenrik

$(window).resize(function(){ 
    if($(window).width() < 500){ 
    $('#obj_id').hide(); 
    }else{ 
    if($('#obj_id').is(':hidden'){ 
     $('#obj_id').show(); 
    } 
    } 
}); 
$(window).trigger('resize'); //so the resize function runs on-load

來源

2012-08-26 00:18:13 orhanhenrik

很好的答案，謝謝 – Jason

有了：

$(window).height(); // returns height of browser viewport 
$(document).height(); // returns height of HTML document

你可以得到高度尺寸...（http://api.jquery.com/height/）而且......

$(window).width(); // returns width of browser viewport 
$(document).width(); // returns width of HTML document

寬度大小...（http://api.jquery.com/width/）

然後..用一個簡單的IF ..你可以做你想做的事情;-)

if($(window).width()<1024)$('#divID').hide();

來源

2012-08-26 00:20:36 gmo

感謝gmo，感謝提示回答 – Jason

如何隱藏div取決於屏幕尺寸的jQuery

回答

相關問題