JavaScriptでメディアのサイズを判定する

isSp.js

var breakPoint = 767;
/* 汎用的な関数をまとめて定義 */
var utility = {
  /**
   * ウィンドウがスマホサイズ（ブレークポイントより小さい）かどうか
   * @return {boolean} [規定した閾値以下であればtrue]
   */
  isSp: function(){
    // IE8以下はfalseを返す
    if (!window.innerWidth){
      return false;
    }
    // IE9以下 or メディアクエリメソッドが使えない場合はinnerWidthで判定
    if(!window.matchMedia){
      return (window.innerWidth <= breakPoint) ? true : false;
    }
    // メディアクエリメソッドで判定
    if(window.matchMedia('(max-width:'+breakPoint+'px)').matches){
      return true;
    } else {
      return false;
    }
  }
};

CSSのメディアクエリでフラグを立てるようにして、JS側ではそれを見るだけ、とするほうがシンプルかもしれない...

例）

• breakpoint以下はDOM#は非表示にし、JS側ではDOM#が非表示かどうかを判定して返すだけ、とか