window.matchmediaとは

簡単にいえば、JavaScript版 mediaqueryです。 https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia windowサイズに応じてJSの処理を書き分けることができます。

ただ、IE10より下では使えません！ スマホはバッチリ！

使い方

とりあえず

var widthMatch = window.matchMedia("(min-height: 500px)").matches;
console.log(widthMatch);

これで、高さの最小値が500pxあるかどうかがブール値で出てきます。 そして、主な使い方として

// ウィンドウサイズでの処理
if (window.matchMedia("screen and (min-width:768px)").matches) { 
  //768px以上のデスクトップでの処理
}else{
  //スクリーンサイズが768pxより小さい時の処理
}

もちろんメディアタイプでの判別もできます。 https://developer.mozilla.org/ja/docs/Web/CSS/@media

// ウィンドウサイズでの処理
var mediaType = window.matchMedia("screen and (min-width:768px)").media;
console.log(mediaType);

横向きの判別もイケる

// ウィンドウサイズでの処理
if (matchMedia("all and (orientation:landscape)").matches) {
  // 横向きの画面だったらイケるはず
}

この中にメソッドなりを入れれば良いです。

function getOrientationValue (mediaQueryList) {
    console.log(mediaQueryList.matches);
}

portraitOrientationCheck = window.matchMedia("(orientation: portrait)");
portraitOrientationCheck.addListener(getOrientationValue);

IE9にも対応する方法

matchMedia.jsとかいう謎のライブラリがあるので使って、どうぞ。 https://github.com/paulirish/matchMedia.js/ ※ addListenerは対応してない模様

参考資料：https://dev.mozilla.jp/2012/08/using-window-matchmedia-to-do-media-queries-in-javascript/