レスポンシブ・ウェブ・デザインでJavaScriptとMedia Queriesのブレークポイントを揃える

記事がだいぶ古くなってしまったので、オーバーライド。
今ならmatchMediaを使ったほうがいいですね。

JavaScript

const mq = window.matchMedia('(min-width: 768px)');

const handleWindowChange = () => {
  if (mq.matches) {
    console.log('PC');
  } else {
    console.log('SP');
  }
};

mq.addListener(handleWindowChange);
handleWindowChange(mq);

これなら、HTML側に余分な要素を追加しなくて良いです。

以下、古い記事。

---

レスポンシブ・ウェブ・デザインの案件で、ブレークポイントがCSSのMedia QueriesとJavaScriptでスクロールバー分ずれてしまうときの対処法メモ。

HTMLには空要素を追加。

html

<!-- Media Queries 判別要素 -->
<div class="mediaQueries" id="js-mediaQueries"></div>

font-familyの値に任意の文字を追加。

scss

.mediaQueries {
    display: none;
    font-family: 'pc';
    @media screen and (max-width: 768px) {
        font-family: 'tab';
    }
    @media screen and (max-width: 480px) {
        font-family: 'sp';
    }
}

font-familyの文字列でブレークポイントを判定し、ブレークポイント変更時に一度だけ処理をする。
（要素の取得にjQueryを使用）

JavaScript

var $win = $(window),
$mediaQueries = $('#js-mediaQueries'),
widthStatus = '';

$win.on('load resize', function() {
	var fontFmaily = $mediaQueries.css('font-family').replace(/"/g, '');
	
	if (fontFmaily === 'pc' && widthStatus != 'pc') {
		// PCの処理
		console.log('pc');
		widthStatus  = 'pc';
	} else if (fontFmaily === 'tab' && widthStatus != 'tab') {
		// TABの処理
		console.log('tab');
		widthStatus  = 'tab';
	} else if (fontFmaily === 'sp' && widthStatus != 'sp') {
		// SPの処理
		console.log('sp');
		widthStatus  = 'sp';
	}
});

デモページ

参照：
Media Queries（メディアクエリ）とJavaScriptの連携について
リサイズやスクロール時に1回だけ処理を行う