Media Queriesの状態をJavaScriptで取得する

Media QueriesのブレークポイントとJavaScriptの実行タイミングを合わせる方法として、過去に以下の記事を投稿しました。
Media QueriesのブレークポイントでJavaScriptを実行する方法
matchMediaを使ってみる
今回は別の方法として、bodyタグの擬似要素に設定したcontentの値を判別して実装する方法を試してみます。

サンプルコード

まずはCSSを設定します。

/* bodyの::beforeを非表示にしておく */
body::before {
  display: none;
}
/* SP用 */
@media screen and (max-width: 767px) {
  body::before {
    content: "sp";
  }
}
/* PC用 */
@media screen and (min-width: 768px), print {
  body::before {
    content: "pc";
  }
}

Media Queriesで画面幅毎にcontentの値を変更するようにして、ページに表示されないように擬似要素自体をdisplay: none;で非表示にしています。
このcontentで設定した値の文字列をJavaScriptで取得、使用する形になります。

次にJavaScriptです。
判別する関数を用意して処理するようにしてみます。

var mqType = media_queries_check();
window.addEventListener('resize', function() {
	mqType = media_queries_check();
}, false);

/**
 * Media Queriesを判別する
 */
function media_queries_check() {
	// ::beforeのstyleを取得
	var style = window.getComputedStyle(document.body, '::before');
	// contentの値を取得して、「"」を除去
	var type = style.getPropertyValue('content').replace(/"/g, '');
	console.log(type); // 動作確認用
	return type;
}

Media Queriesの状態をJavaScriptで取得するデモページ
getComputedStyle()で指定した要素のstyleを取得、getPropertyValue()で指定したプロパティの値を取得しています。
そのままだと「”sp”」や「”pc”」のように「”」もついた状態になるので、replace()を使って除去して、その値をmqTypeという変数で管理するようにしています。

今回はPCとSPのみ設定しましたが、ブレークポイントをさらに細かく分けることもできますし、ブレークポイントの値変更もCSS側の変更のみで対応できます。
　

【参考サイト】

• Importing CSS Breakpoints Into JavaScript | Lullabot
• JS/jQueryでCSS疑似要素である:before:afterのプロパティを取得し変更する | ITハット
• window.getComputedStyle | MDN
• CSSStyleDeclaration.getPropertyValue() | MDN