如何根据屏幕大小使用 jQuery 隐藏 div答案

【问题标题】：How to hide a div wih jQuery dependant on screen size如何根据屏幕大小使用 jQuery 隐藏 div
【发布时间】：2012-08-26 00:12:15
【问题描述】：

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

我在一个 div 中有一个来自 BuySellAds 的 468 像素 x 60 像素的广告横幅，我想对在智能手机或平板电脑上查看该网站的查看者隐藏它。

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

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

谢谢

【问题讨论】：

媒体查询确实有效，并且是首选方法。您可以发布您尝试过的内容吗？
很奇怪。我通过使用此查询“#header_ad { display:none }”尝试了媒体查询，但没有成功。我现在又试了一次，它起作用了。使用火狐

标签： javascript jquery responsive-design show-hide banner

【解决方案1】：

您可以从$(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?

【讨论】：

你也应该在onload上调用resize函数，这样即使你不调整窗口大小，元素也会被隐藏

【解决方案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

【讨论】：

【解决方案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();

【讨论】：

谢谢gmo，感谢及时回复