レスポンシブサイトに使える！画面サイズで読み込むJavascriptを切り替えるjs

レスポンシブウェブデザインでサイト作成をする際に、場合によっては使うことになるかも知れないJavascriptで画面サイズ指定に応じたjavascriptを読み込む条件分岐です。

<script type="text/javascript">
jQuery(document).ready(function($) {
	//PC環境の場合
	if (window.matchMedia( '(min-width: 769px)' ).matches) {　//切り替える画面サイズ
		$.ajax({
			url: 'js/pc.js',
			dataType: 'script',
			cache: false
	   });
	//モバイル環境の場合
	} else {
	    $.ajax({
			url: 'js/sp.js',
			dataType: 'script',
			cache: false
		});
	};
});
</script>

自分がこのスクリプトを使用した経緯は、レスポンシブウェブデザインでBGMを流したい要望があった時でした。

レスポンシブなのでFlashは使えず、HTML5で実装されたaudioタグを使った。PCは自動再生でミュートボタンを、スマホはONとOFFのボタンすることになった。そして、プログレスバー（再生時間の横棒）じゃなくて画像ボタンで操作が出来るようにする。

そんな時に、タブレット・スマホ表示サイズでのCSS切り替えと連動させた、js切り替えが必要になった。1つのファイルにjsを書いてしまうといろいろ面倒でややこしくなるので、個々にファイルを読み込む方法にしました。