Как скрыть div с jQuery в зависимости от размера экрана

Я пишу отзывчивую тему WordPress и нахожусь в ситуации, когда я хочу скрыть div, основанный на разрешении экрана зрителя.

У меня есть рекламный баннер 468px на 60px от BuySellAds в div, и я хотел бы скрыть его от зрителей, которые просматривают сайт на смартфоне или планшете.

Я попытался добиться этого с помощью CSS3 media queries, однако это не сработало.

Может ли это быть достигнуто с помощью jQuery? Если это так, любой код, который укажет мне правильное направление, будет будьте очень признательны.

Спасибо

3 2
javascript jquery responsive-design show-hide

3 ответа:

Вы можете взять значения из селектора $(window). Для получения текущего значения используйте метод resize():

Здесь работает 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();
   }
});​

Edit: вы также можете сделать это с помощью pure css3, используя этот css: 

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

И я предлагаю проверить эти ответы, если вы хотите пойти дальше с значениями прокрутки jQuery: установка CSS пределов значений анимации прокрутки окна и Как построить простую липкую навигацию на странице боттум?

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

С:

$(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($(window).width()<1024)$('#divID').hide();
0