スマホ or PCのみでJavaScript, jQueryを実行する

レスポンシブウェブサイトを制作で必要になる機会が多いデバイスによって表示を切り替えたり、処理を変更したりする時に。

デバイス（スマホ・タブレット・PC）ごとにJavaScriptやjQueryの実行させたいときの処理まとめ。

ウィンドウサイズで判断する

jQueryでウィンドウのサイズを判別して処理を実行する例です。

$(document).ready(function(){
　if ($(window).width() < 768) { //768px未満の時
　　$('#id').click(function() {
	//実行する処理
　　}
});

width()メソッドで取得したサイズはスクロールバーを含まない値であることに注意。CSSのメディアクエリーと取得するサイズが異なります。

またこの場合はページが読み込まれた時に処理を実行して終了となるので、ウィンドウをリサイズしたりスマホを横にしたりした時には実行されません。

リサイズも判別する場合は.resize () で処理します。

しかしresizeのの場合、リサイズの度に処理が実行されてしまうので、スマホなど頻繁にリサイズされる可能性がある状況ではレスポンスに影響がでる恐れがあります。

setTimeout()でタイマーを設定しておくことが推奨されます。

MediaQueryListオブジェクトを使う

window.matchMediaを使うとCSSのメディアクエリーと同じように書くことができます。

メディアクエリーが変更された時だけ実行できるので不必要な処理がなくなります。

//Prepare a MediaQueryList
var mql = window.matchMedia("(max-width:768px)");

function checkScreen(e){
　if(e.matches){
　　console.log('Small Size');
　} else {
　　console.log('Large Size');
　}
mql.addEventListener('change', checkScreen);

MediaQueryList
https://developer.mozilla.org/ja/docs/Web/API/MediaQueryList

window.matchMedia のデメリットとしては、IE9以下に対応していないということですがIE自体のサポートが終了していますので現在は問題ないと言えますね。

例：スマホだけでJavaScriptを有効にする

768px以上では実行しないようになります。

$(document).ready(function(){
	if (window.matchMedia('(max-width: 767px)').matches) {

			//767pxまでの画面サイズの時の処理	
	}
});

例：メディアサイズで処理するJSを判別する

メディアサイズごとにajax関数で処理する外部ファイルを指定します。

$(document).ready(function(){
	if (window.matchMedia('(max-width: 767px)').matches) {
		$.ajax({
			url: '../js/sp.js',
			dataType: 'script',
			cache: false
		});
	} else if (window.matchMedia('(min-width:768px)').matches) {
		$.ajax({
			url: '../js/pc.js',
			dataType: 'script',
			cache: false
		});
	}
});

ユーザーエージェントで判断する

ユーザーエージェントとはWebサイトにアクセスしている人のデバイス、OS、ブラウザ、検索エンジンの情報などのことでこの情報を元に判別することができます。

indexOfで対象の文字列があるかどうかを検索し、ある場合は出現した位置を返します。文字列がない場合は-1を返します。

var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0){
	//iPhoneの時の処理
}else if(ua.indexOf("Android") > 0 && ua.indexOf("Mobile") > 0){
	//Android（モバイル）の時の処理
}else if(ua.indexOf("iPad") > 0){
	//iPadの時の処理
}else if(ua.indexOf("iPod") > 0){
	//iPodの時の処理
}else{
	//その他PCの処理
}

Apple系はiPhone,iPad,iPodとはっきり分けることができます。

Androidの場合、スマホ・タブレットも全て含まれるのでモバイルとタブレットを分けたい場合は「Mobile」も判定に加えます。

$(window).on('load',function(){ //ページが読み込まれた時に実行

var ua = navigator.userAgent;

if (ua.indexOf('iPhone') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0 )) {
// スマホ用の処理
} else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
// タブレット用の処理
} else {
// PC用の処理
}
});

$(window).load(function(){
});

$(window).on("load", function(){
});

JavaScriptでPC/スマホを判別するのは手軽にできますが、JavaScriptがオフの時には使えません（当然ですが^^;）

下記ページでは重複している部分もありますが、.htaccess,JavaScript,PHPでPC/スマホを判断する方法も書いています。

スマホ・PCを判別してリダイレクトする方法まとめ

ウェブサイトでPC用ページとスマホ用ページが別々に存在する場合、ユーザーエージェントで振り分けるのが一般的です…

tokushiyo.net