レスポンシブサイトの切り替えポイント〜javaScript | IT工房｜AI入門とWeb開発

レスポンシブサイトを作成するときに、javascriptで切り替えポイントを認識させる方法の説明です。
javascriptですからjQueryでも使用できます。

CSSメディアクエリによる切り替え

まずは、CSSでのメディアクエリを利用した切り替えポイントの例です。
501px以上ではdiv.baseは赤色ですが、500px以下ではdiv.baseは緑色になります。
これはCSSのメディアクエリで指定したものです。

<div class="base"></div>

CSSコード

  .base{
      width:200px;
      height:100px;
      background-color: red;
    }

    @media (max-width:500px){
    .base{
      background-color: green;
    }
}

jQueryでクラスのON,OFFによる切り替え

CSSOMのmatchMediaを活用した切り分け方法です。
500pxをポイントに上のサンプル同様にdivの色が赤から緑に変わります。

ただ問題点として、画面幅を拡大縮小して切り替えポイントを超えただけでは何も実行されません。
一度ブラウザの更新をしないと切り替わらないのが問題点です。
実用上でモバイルとPCの切り替えが目的ならこの問題は起きません。500px以下のモバイルならdivは緑色になりますし、それ以上の幅のものならdivは赤くなります。ブラウザを広げたり縮めたりした時にリアルタイムに変化しないだけです。

jQueryでクラスのON,OFFによる切り替えサンプル
HTMLコード

<div class="base"></div>

CSSコード

  .base{
      width:200px;
      height:100px;
      background-color: red;
    }
    .base.on{
      background-color: green;
    }

jQueryコード

$(function(){
  if(window.matchMedia("(max-width:500px)").matches){
      $('.base').addClass('on');  //500px以下の場合
  }else{
      $('.base').removeClass('on');  //500px以上の場合
  }
  })

resize()を使用した時の問題点

JavaScriptのresize()を使用してブラウザの幅の変化にリアルタイムに反応させることができますが、resize()では1pxの変化でもイベントが発生してしまいます。次のような問題が起こっています。このサンプルはresize()のイベントでtoggleClass()を使用してクラスを付けたり外したりして色を変えています。サンプルを見ていただくとお分かりのようにブラウザの幅を変化させると、赤と緑が点滅しながら入れ替わります。
resizeを使用した場合に起こる問題のサンプル
jQueryコード

$(function(){
    $(window).resize(function() {
      $('.base').toggleClass('on');
  });
  })

問題解決する方法

setTimeoutを使用してイベントを感知しても少し時間を置いて処理を実行させると、ブラウザの幅の変更が終了した時点で処理が行われるようになります。

setTimeoutを使用した解決サンプル

jQueryコード

  $(function(){
    var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        $('.base').toggleClass('on');
    }, 200);
});
  })

切り替えポイントを明確にする

このサンプルは最初に期待した処理ができるようにしたものです。
501px以上ではdiv.baseは赤色ですが、500px以下ではdiv.baseは緑色になります。

matchMedia()は未対応ブラウザがありますので注意してください。
未対応ブラウザは IE9 以下や Opera Mini 、Android Browser 3以下
非対応ブラウザで window.matchMedia を使いたい場合は、「matchMedia.js」を利用します。以下のページよりコードを取得できます。
matchMedia.js

切り替えポイントを500pxにしたサンプル
jQueryコード

  $(function(){
    var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
      if(window.matchMedia("(max-width:500px)").matches){
          $('.base').addClass('on');  //500px以下の場合
      }else{
          $('.base').removeClass('on');  //500px以上の場合
      }
    }, 200);
});
  })

Modernizrの活用

こちらはModernizrを使用して切り替えポイントを設定したものです。
Modernizrはこちらから
Modernizrのダウンロード方法がわかりにくくなっています。

初めての方はまずは「Development build」のボタンを選択をクリック
ダウンロードページに移ったらBUILDをクリック
出てきたボックスのDownloadをクリック

Modernizrを活用したサンプル
jQueryコード

$(function(){
    var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
      if(Modernizr.mq("(max-width:500px)")){
          $('.base').addClass('on');  //500px以下の場合
      }else{
          $('.base').removeClass('on');  //500px以上の場合
      }
    }, 200);
});
  })

ModernizrをSVG判定に活用

Modernizrは様々な判定に活用することができます。
詳細はこちら

次の例はブラウザがsvgに対応しているかどうかを判定しています。
SVG判定サンプル
HTMLコード

  <p class="result"></p>

jQueryコード

  $(function(){
      if(Modernizr.svg){
          $('.result').text('svgに対応しています。');
      }else{
          $('.result').text('svgに対応していません。');
      }
  })

SVG画像表示例

Modernizrを使用してsvgが使用可能かどうか判定して使用可能ならreplace関数で拡張子をsvgに変更する例です。
SVG画像表示サンプル
HTMLコード

<img src="img1.png" width="200" alt="マスコット" class="result">

jQueryコード

$(function(){
    if (Modernizr.svg) {
  $("img[src$='.png']").each(function(){
      $(this).attr('src', $(this).attr('src').replace('.png', '.svg'));
  });
}
  })