3

ウィンドウのサイズが変更されたときの検出に関して、作業中のサイトについて質問があります。私はこれが以前に議論されたことを知っています、そして私は多くの議論を読み通しました、そしてただそれを機能させることができませんでした。私はjqueryを学んでいます。

 $(function(){
    var viewPortWidth = $(window).width();
    if (viewPortWidth > 1900)
    {
       $('#mainbio, #footerlinks').addClass('extraWide')
    }
    else if (viewPortWidth > 1400)
    {
       $('#mainbio, #footerlinks').addClass('wide')
    }
    else if (viewPortWidth > 1000) 
    {
       $('#mainbio, #footerlinks').addClass('standard')
    }
    else if (viewPortWidth > 700)
    {
       $('#mainbio, #footerlinks, #twitter, #facebook, #flickr,   #lastfm').addClass('narrow')
    }
    else 
    {
       $('#mainbio, #footerlinks, #twitter, #facebook, #flickr, #lastfm').addClass('extraNarrow')
    }
 });

これは私がこれまでに持っているものであり、正常に動作しますが、初期ロードでのみ機能します。誰かがこれを調整して動的に機能するように手助けしてくれるかどうか疑問に思っています-更新せずに手動でブラウザのサイズを変更した場合に変更を確認できますか？

ありがとう！

4

2 に答える 2

7

を使用して、この関数をコールバックできます.resize()。

例えば

var detectViewPort = function(){
    var viewPortWidth = $(window).width();
    if (viewPortWidth > 1900)
    //...The rest of your above code.
};

$(function(){
  detectViewPort();
});

$(window).resize(function () {
   detectViewPort();
});

これを回避する別の/より良い方法があるかもしれませんが、これは私が知っているオプションです。

于 2013-02-25T00:19:47.187 に答える
1

現時点では、これは自己呼び出しの匿名関数であるため、ページが読み込まれるとすぐに実行されます (したがって、1 回実行されます)。

ウィンドウのサイズが変更されるたびに実行するには、ウィンドウにサイズ変更イベントを登録する必要があります (完全なドキュメントはhttp://api.jquery.com/resize/にあります)。

行を更新する場合:

$(関数() {

だからそれは読む

$(window).resize(関数() {

ウィンドウブラウザのサイズが変更されるたびに呼び出されます。

于 2013-02-25T00:19:31.253 に答える