2

レスポンシブなWordPressテーマを書いていますが、ビューアの画面解像度に基づいてdivを非表示にしたい状況にあります。

divにBuySellAdsの468x60pxの広告バナーがあり、スマートフォンまたはタブレットでサイトを表示する視聴者から非表示にしたいと思います。

CSS3メディアクエリを使用してこれを達成しようとしましたが、機能しませんでした。

これはjQueryを使用して実現できますか？もしそうなら、私を正しい方向に向けるためのコードをいただければ幸いです。

ありがとう

4

3 に答える 3

5

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

編集：このcssを使用して、純粋なcss3でもこれを行うことができます：

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

jQueryのスクロール値 をさらに詳しく知りたい場合は、これらの回答を調べることをお勧めします。ウィンドウスクロールアニメーション のCSS値の制限を設定し、ページ下部にシンプルなスティッキーナビゲーションを構築する方法を教えてください。

于 2012-08-26T00:17:31.157 に答える
0 
$(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
于 2012-08-26T00:18:13.937 に答える
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 を使用して、やりたいことを実行できます ;-)

if($(window).width()<1024)$('#divID').hide();
于 2012-08-26T00:20:36.753 に答える