Question

我正在编写一个自适应的WordPress主题，并且我希望根据查看器的屏幕分辨率隐藏div。

我在一个div中有来自BuySellAds的468像素乘60px广告横幅，我想将其隐藏在智能手机或平板电脑上查看该网站的观众中。

我尝试使用CSS3媒体查询来实现这一点，但它无效。

这可以使用jQuery实现吗？如果是这样，任何能指出正确方向的代码将不胜感激。

由于

Answer 1

您可以从$(window)选择器中获取值。获得当前价值;使用resize()方法：

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();
   }
});

编辑：您也可以使用此css执行纯css3：

@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?

Answer 2

$(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

Answer 3

使用：

$(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();

如何使用jQuery隐藏div取决于屏幕大小

3 个答案: