画面の幅が960ピクセル未満の場合は何かを行う

Do something if screen width is less than 960 px


質問 written by Daniel Kmak @2019-06-05 11:06:05Z

: 207 : 10 : 555

画面の幅が960ピクセル未満の場合、jQueryに何かをさせるにはどうすればよいですか? 以下のコードは、ウィンドウサイズに関係なく、常に2番目のアラートを起動します。

if (screen.width < 960) {
    alert('Less than 960');
}
else {

    alert('More than 960');
}
コメント 1

ページの読み込み時にこれを行っていますか、それともブラウザのサイズを変更したときに行いますか。alert(screen.width)と言って、決定に使用されたものを確認することをお勧めします。

written by ファルークスバニ @2011-10-10 15:31:01Z

コメント 2

なぜメディアクエリではないのですか?

written by bzlm @2011-10-10 15:32:54Z

コメント 3

なぜメディアクエリではないのですか?メディアクエリがまったく役に立たないケースはいくつでも考えられます。jdlnがjQueryを使用したい場合、そうする正当な理由があると仮定しましょう。

written by ルーク @2015-06-30 05:00:24Z

コメント 4

これは、メディアクエリが機能しない場合、たとえば画面の幅がたとえば1000ピクセルよりも大きい場合にのみ石積み効果をアクティブにする場合に使用されます。

written by PekkaはGoFundMonicaを @2017-12-02 20:31:20Z

回答 1 written by aziz punjani @2013-07-25 12:23:51Z
424

jQueryを使用して、ウィンドウの幅を取得します。

if ($(window).width() < 960) {
   alert('Less than 960');
}
else {
   alert('More than 960');
}
コメント 1

スクロールバーが表示されている場合、$(window).width()はブラウザー間で一貫していないことに注意してください。JavaScriptメディアクエリを使用する方がはるかに信頼性が高いことがわかりました。

written by forsvunnet @2013-12-30 12:36:29Z

コメント 2

@forsvunnetそのリンクは死んでいます。

written by シャーアバズカーン @2018-06-07 11:19:07Z

コメント 3

JavaScriptメディアクエリへのリンク: w3schools.com/howto/howto_js_media_queries.aspTimar

written by Ivo @2018-12-07 14:03:40Z

回答 2 written by jk. @2012-09-02 14:41:41Z
133

サイズ変更イベントと組み合わせることができます。

 $(window).resize(function() {
  if ($(window).width() < 960) {
     alert('Less than 960');
  }
 else {
    alert('More than 960');
 }
});

RJの場合:

For R.J.:

http://api.jquery.com/off/を試してみましたが成功しなかったため、eventFiredフラグを使用しました。

コメント 1

サイズ変更イベントをラップすると、ロードではなくサイズ変更時にのみ発生します。

written by テッド @2012-05-22 23:41:40Z

コメント 2

@Tedだから、とcombine it with言った。

written by jk。 @2012-05-24 18:52:10Z

コメント 3

@RJは上記の編集を参照してください。イベントを「クリア」することの意味がわかりませんので、イベントが再び発生しないようにしました。

written by jk。 @2012-09-02 14:42:41Z

コメント 4

素晴らしい、私は数日間、サイズ変更時にequalHeights関数をバインドする方法をequalHeightsうとしましたが、幅は768より大きい場合のみです。これは魅力のように機能します。ありがとう

written by ダニーイングランド @2013-03-13 19:35:03Z

コメント 5

そのコードの後に​​サイズ変更イベントを追加すると、ブラウザの現在のサイズが何であれロード時に必要なコードが実行されるようになります

written by BennKingy @2019-09-20 11:27:34Z

回答 3 written by moabi @2016-05-17 13:15:05Z
10

私は提案します(jQueryが必要です):

/*
 * windowSize
 * call this function to get windowSize any time
 */
function windowSize() {
  windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
  windowWidth = window.innerWidth ? window.innerWidth : $(window).width();

}

//Init Function of init it wherever you like...
windowSize();

// For example, get window size on window resize
$(window).resize(function() {
  windowSize();
  console.log('width is :', windowWidth, 'Height is :', windowHeight);
  if (windowWidth < 768) {
    console.log('width is under 768px !');
  }
});

CodePenに追加: http ://codepen.io/moabi/pen/QNRqpY?editors=0011

次に、var:windowWidthとHeightでwindowの幅を簡単に取得できます:windowHeight

それ以外の場合は、jsライブラリを取得します: http : //wicky.nillia.ms/enquire.js/

回答 4 written by @2017-08-31 21:35:31Z
10

JavaScriptでメディアクエリを使用することもできます。

const mq = window.matchMedia( "(min-width: 960px)" );

if (mq.matches) {
       alert("window width >= 960px");
} else {
     alert("window width < 960px");
}
回答 5 written by Daniel Kmak @2018-11-09 14:13:02Z
10

このようなことにはjQueryを使用せず、 window.innerWidth進むことをお勧めします。

if (window.innerWidth < 960) {
    doSomething();
}
コメント 1

jQueryを使用しないほうがよいのはなぜですか?

written by レゾン @2018-12-14 11:06:58Z

回答 6 written by Guard @2011-10-10 15:29:54Z
9

つかいます

$(window).width()

または

or

または

$(document).width()
回答 7 written by leymannx @2017-05-17 23:18:57Z
9
// Adds and removes body class depending on screen width.
function screenClass() {
    if($(window).innerWidth() > 960) {
        $('body').addClass('big-screen').removeClass('small-screen');
    } else {
        $('body').addClass('small-screen').removeClass('big-screen');
    }
}

// Fire.
screenClass();

// And recheck when window gets resized.
$(window).bind('resize',function(){
    screenClass();
});
回答 8 written by Veljko Stefanovic @2016-12-09 01:54:11Z
8

私はこれに答えるのが遅れていることを知っていますが、同様の問題を抱えている人にとって助けになることを願っています。 何らかの理由でページが更新された場合にも機能します。

$(document).ready(function(){

if ($(window).width() < 960 && $(window).load()) {
        $("#up").hide();
    }

    if($(window).load()){
        if ($(window).width() < 960) {
        $("#up").hide();
        }
    }

$(window).resize(function() {
    if ($(window).width() < 960 && $(window).load()) {
        $("#up").hide();
    }
    else{
        $("#up").show();
    }

    if($(window).load()){
        if ($(window).width() < 960) {
        $("#up").hide();
        }
    }
    else{
        $("#up").show();
    }

});});
回答 9 written by JIBIN BJ @2017-01-04 13:30:32Z
1

このコードを試してください

if ($(window).width() < 960) {
 alert('width is less than 960px');
}
else {
 alert('More than 960');
}

回答 10 written by Tiffany Lowe @2015-07-27 22:13:12Z
8

いいえ、これは機能しません。 必要なのはこれです!!!

これを試して:

if (screen.width <= 960) {
  alert('Less than 960');
} else if (screen.width >960) {
  alert('More than 960');
}
コメント 1

リンクの投稿は答えではありません。

written by nedaRM @2013-09-18 05:53:45Z

コメント 2

急いでいたのでごめんなさい!ちょっと待って、私は今それをやっている

written by ...-Saurav Chaudhary @2013-10-25 14:35:53Z

コメント 3

screen.width(vanilla JSを使用する場合はdocument.body.clientWidthキャプチャするのが最適)が<= 960(ここでif文を意味する)である場合、他の唯一のオプション(ELSEはscreen.width> 960)であるため、else if hereを使用することに注意してください冗長です。document.body.clientWidth <=960 ? handleSmallerThan960() : handleLargerThan960()使用しdocument.body.clientWidth <=960 ? handleSmallerThan960() : handleLargerThan960()document.body.clientWidth <=960 ? handleSmallerThan960() : handleLargerThan960()またはいくつかのバリアント。他の場合は必要ありませんif(冗長コード)

written by Zargold @2018-04-11 19:12:37Z