スマホorPCのみでjquery/javascriptを実行する

2015-07-02

レスポンシブのウェブサイトを制作で必要になる機会が多いはず

スマホ／タブレット／PCの特定の場合で、javascriptの実行させたいときなど

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

$(document).ready(function(){
if ($(window).width() < 1024) {
$('#id').click(function() {
	//実行する処理
}
});

 

MediaQueryListオブジェクトを使う

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

//Add a listener to the MediaQueryList
mql.addListener(function(e){
if(e.matches){
console.log(‘enter mobile’);
}
});

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

$(window).load(function() {
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
// スマホ・タブレット用javascript
} else {
// PC用javascript
}
});

http://blow-in.net/さんから