Я пишу адаптивную тему WordPress и нахожусь в ситуации, когда хочу скрыть div в зависимости от разрешения экрана зрителя.
У меня есть рекламный баннер 468px на 60px от BuySellAds в div, и я хотел бы скрыть его от зрителей, которые просматривают сайт на смартфоне или планшете.
Я пытался добиться этого с помощью медиа-запросов CSS3, но это не сработало.
Можно ли этого добиться с помощью jQuery? Если да, то любой код, указывающий мне в правильном направлении, был бы очень признателен.
Спасибо
Вы можете взять значения из селектора $(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();
}
});
Редактировать: Вы также можете сделать это с чистым css3, используя этот css:
@media only screen and (min-width: 767px) { .ele { display:none; } }
И я предлагаю проверить эти ответы, если вы хотите пойти дальше с значениями прокрутки jQuery: Установка ограничений значений CSS для анимации прокрутки окна и Как создать простую липкую навигацию внизу страницы?
С:
$(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();
