【jQuery】画面幅ごとに処理内容を変える

レスポンシブデザインでPCとスマホ等画面幅ごとに異なるレイアウトにするように、
jQuery (JavaScript) の効果、処理内容も画面サイズ別に変更させる方法についてメモします。

今回はクリックした画像が画面中央に拡大表示されるモーダルウインドウを例に解説します。

モーダルウインドウを使った写真ギャラリー（こちらから確認出来ます）

上記の例は画面幅が小さい時にモーダルウインドウで中央に拡大表示される画像の大きさが画面幅を超えてしまい、
画像の左右が見切れてしまっています。

画面幅が小さい時は、拡大表示される画像が画面内ぴったりに収まるようにしたいと思います。
（モーダルウインドウの実装方法の詳細については割愛します）

今回はPCとモバイルの切り替わりのブレイクポイントをざっくりと500pxとします。
　
条件にしたい画面幅を取得する

　
上記のいずれの方法も画面幅を取得する事が出来ますが、
前者のwidthメソッドで取得する画面幅にはブラウザのスクロールバーが含まれません。

処理の条件にしたいメディアクエリで判定する画面幅はスクロールバーが含まれた幅であるため、
スクロールバーの有無どちらの挙動も考慮して後者のinnerWidthの仕組みを利用した書き方で実装します。

– JS –

$(function(){
  $("body").append("<div id='glayLayer'></div><div id='overLayer'></div>");
  $("#glayLayer").click(function(){
    $(this).hide();
    $("#overLayer").hide();
  });
  $("a.modal").click(function(){
    var windowWidth = window.innerWidth;
      $("#glayLayer").show();
      $("#overLayer").show().html("<img src="+$(this).attr("href")+">");   
    
    if(windowWidth <= 500){
      $("#overLayer img").css("width",windowWidth);
      $("#overLayer").css("margin-left",-windowWidth/2);
    }
    return false;
  });
});

　
画面幅が500px以下の時に条件分岐をして、上に重なる画像のwidthプロパティに画面幅を指定してやる事で、画像の幅が画面幅と同じになる。（画面からはみ出さないで横一杯に広がる）（13行目）

画像拡大表示される画像の位置を指定するための※margin-leftプロパティも※元の値から変えている。（14行目）
※cssコード参照

HTML
CSS

小さい画面の時は拡大される画像が画面幅に収まるようになりました。
サンプル（こちらから確認出来ます）
　
この仕組み応用すればPC、モバイルどちらか一方のサイズのみjQuery(JavaScript)をオン（またはオフ）にする事も出来そうです。

Follow me!