[jQuery]ブラウザの横幅で処理を変えるjQueryの条件分岐。

ブラウザの横幅で処理を変えるjQueryの条件分岐です。
今回は読み込んだ時とリサイズした時に処理が行われるようにしています。

JS

$(window).on('load resize', function(){
  var winW = $(window).width();
  var devW = 767;
  if (winW <= devW) {
    //767px以下の時の処理
  } else {
    //768pxより大きい時の処理
  }
});

レスポンシブWebデザインでブラウザサイズによって処理を切り替える時に便利ですね。

記事の一覧ページで<li></li>などの要素が横並びでレイアウトしていて、PCサイズの時はjQuery.tile.jsを使って要素の高さを揃え、スマホサイズの時は縦一列にする場合などに有効です。