JQueryブラウザのサイズを変更する、1024を超えるdivを編集する

Question

私が達成しようとしているのは簡単です。あなたがウェブサイトを見ていて、iPod Touch、小さなタブレット、またはあなた自身でブラウザのサイズを変更したことがあるとしますが、ブラウザの幅が1024px以下で、div内のテキストがいっぱいになりますすべての余分なコンテンツにだから私の答えは基本的な構造のために簡単です。ブラウザが1024px以下になると、テキストを非表示にします。

私はこれを試しましたが、動作していないようです。どんな助け？この場合

$(window).resize(function(){ 
    if($(window).width() < 1024) { 
     $('h2#head1').hide();} 
    else { 
     $('h2#head1').show();}; 
}); 

Answer 1

あなたのセレクタは（ 'H2番号のHEAD1' または単に '＃1 HEAD1'、ないH2＃1 HEAD1でなければなりません）オフになっているので、それはです。それが処理されていません負荷に意味、ウィンドウが実際にリサイズされるまで、これは処理しません

1. ：しかしhttp://jsfiddle.net/ERBKU/

   を参照してください、私はカップルの他の観測を持っています。だから、ロード時にこのロジックを2倍にする必要があります。しかし、それはポイント2に私を導く...

2. 私はあなたが少しjQueryとCSSを組み合わせることでより良い結果を得ると思う。私はModernizrと初期のjQuery Mobileで使用されている方法論を参照しています。基本的には、読み込みとサイズ変更時にビューポートの幅を検出し、幅のしきい値を満たしている場合は、特定のCSSセレクタをhtml要素にタックします。このセレクタは、ターゲット要素のCSSプロパティに影響を与える可能性があります。このルートのメリットは、jQueryのちょっとしたスニペットが必要なだけで、CSSでレイアウトルールを追加するだけで、追加要素の表示プロパティを簡単に微調整できます。 jQueryの大きなブロックを維持してページを操作して、必要な方法を表示するよりもずっと簡単です。さらに、追加のレイアウトしきい値を追加することもできますが、それでも同じように動作します。