Media Queries で JavaScript をデバイス毎に読み込む

ウェブ 2013-11-14

外部 JavaScript ファイルをスマートフォンやタブレットには読み込ませたくないが、それ以上の大きさのデバイス（パソコンなど）には読み込ませたい場合の一例。実際、JQuery プラグインとの相性で、iPhone 5s 上の Safari の操作に不具合を来したため。

まず、外部 CSS ファイルを Media Queries を使って、デバイス毎に振り分ける方法は、

<link rel="stylesheet" href="./css/1.css" type="text/css" media="only screen and (max-device-width:480px)" />
<link rel="stylesheet" href="./css/2.css" type="text/css" media="screen and (min-device-width:481px)" />

同じような振り分けを外部 JavaScript ファイルについて行うには window.matchMedia を使って、

$(document).ready(function(){
	if (window.matchMedia("only screen and (max-device-width:480px)").matches) {
		var script = document.createElement('script');
		script.src = './js/1.js';
		document.body.appendChild(script);
	}else{
		var script = document.createElement('script');
		script.src = './js/2.js';
		document.body.appendChild(script);
	}
});

と document.createElement で動的に読み込めば、

document.write('<script type="text/javascript" src="./js/1.js">' + '</scr' + 'ipt>');

とする必要がなくなります。

エレンコ＠管理人: Webデベロッパー; ジャズやブラジル音楽が好きです。ふーん、これはジャズなのか、という名盤から、うん、これはジャズじゃないね、という名盤まで。ご意見・ご感想などがあればX（旧Twitter）まで。@elenco

Media Queries で JavaScript をデバイス毎に読み込む

関連記事