レスポンシブ対応時のJavascriptとメディアクエリ

らら
らら

はじめに

レスポンシブ対応時に、JQuery、Javascriptでは、ひと昔は、ユーザーエージェントで判断していたが、デバック検証でエージェントなど

わざわざ変更するのが面倒なので、jQuery、Javascriptでメディアクエリの指定のサイズで書くことで、ブラウザー幅を変更するだけで検証できるようにする。

コード

昔は下記


    var ua = navigator.userAgent;
    if((ua.indexOf('iPhone') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)){
		//スマフォ
    } else {
		//pc
    }

メディアクエリのサイズで連動させる

jQuery時

ブラウザーサイズ変更時、リアルタイムにしたい場合、resizeイベントを利用

利用しない場合、ブラウザーサイズ変更後手動でリロードする。


	//jQueryあり
	if($(window).width() < 768) {
		//スマフォ
	} else {
		//pc
	}

Javascriptのみの時

ブラウザーサイズ変更時、リアルタイムにしたい場合、resizeイベントを利用

利用しない場合、ブラウザーサイズ変更後手動でリロードする。


	//jQueryなし
	if(window.innerWidth < 768) {
		//スマフォ
	} else {
		//pc
	}

matchMediaを使う(IE10から、その他ブラウザーバージョンを確認することアンドロイドとかね)

ブラウザーサイズ変更時、リアルタイムにしたい場合、resizeイベントを利用

利用しない場合、ブラウザーサイズ変更後手動でリロードする。


    if(window.matchMedia("(max-width:768px)").matches){
		//スマフォ
	} else {
		//pc
	}

オンロードとリサイズを考慮する場合


//ウインドウ読込時とリサイズ時は、こんな感じで
$(window).on('load resize',function() {
	//ここにリサイズのコードを書く！
});

デメリット

メディアクエリのサイズ変更は、Javascriptも変更を忘れないでね。

PHPとかシステム連動することきは、やっぱり、ユーザーエージェント変更する・・・？

最後に

個人的なメモです。

忘れん坊です。汗

関連記事