Edited at

レスポンシブ・ウェブ・デザインで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回だけ処理を行う