如何根据屏幕尺寸使用 jQuery 隐藏 div

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

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

我尝试使用 CSS3 媒体查询来实现此目的，但它不起作用。

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

Thanks

您可以从中获取值$(window)选择器。用于获取当前值；使用resize() method:

这是工作中的 jsFiddle。 http://jsfiddle.net/8hWfq/8/

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:您也可以使用纯 css3 来执行此操作，使用以下 css：

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

如果您想进一步了解，我建议检查这些答案jQuery 滚动值： 设置窗口滚动动画的CSS值限制 https://stackoverflow.com/questions/11971475/setting-css-value-limits-of-the-window-scrolling-animation/11971912#11971912 and 如何在页面底部建立简单的粘性导航？ https://stackoverflow.com/questions/11983294/make-div-stick-to-bottom-of-browser-then-top-of-browser-on-scroll/11983369#11983369