1

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

これを試しましたが、うまくいかないようです。ここで何か助けはありますか？

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

1 に答える 1

2

この場合、セレクターがオフになっているためです（h2＃head1ではなく'h2＃head1'または単に'＃head1'である必要があります）。http://jsfiddle.net/ERBKU/を参照してください

ただし、他にもいくつかの所見があります。

  1. これは、ウィンドウが実際にサイズ変更されるまで処理されません。つまり、ロード時にウィンドウは処理されません。したがって、ロード時にこのロジックを2倍にする必要があります。しかし、それは私をポイント2に導きます...
  2. 少しのjQueryとCSSを組み合わせると、より良い結果が得られると思います。Modernizrと初期のjQueryMobileで使用されている方法論を参照しています。基本的に、ロードとサイズ変更の際に、ビューポートの幅を検出し、幅のしきい値を満たしている場合は、特定のCSSセレクターをhtml要素に追加します。このセレクターは、しきい値を満たしている場合、ターゲット要素のCSSプロパティに影響を与える可能性があります。このフィドルを参照してください：http：//jsfiddle.net/b5LYq/1/このルートの利点は、jQueryの小さなスニペットが1つだけ必要であり、CSSにレイアウトルールを追加するだけで、追加の要素の表示プロパティを簡単に調整できることです。jQueryの大きなブロックを維持してページを操作し、希望どおりに表示するよりもはるかに簡単です。さらに、レイアウトのしきい値を追加しても、同じように機能します。
于 2012-05-01T04:32:07.960 に答える