スマホで閲覧した時だけJavaScriptを一部無効化したり有効化したりする

  • 33
    Like
  • 0
    Comment
More than 1 year has passed since last update.

ユーザーエージェントでスマホかPCか判別してやる方法です。
※画面サイズを取得してやる方法もあります。こちらが参考になりました。
ウィンドウ幅をjQueryで取得して動作を制御する覚書 | 9ineBB

コード

無効.js
if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
//ここに書いた処理はスマホ閲覧時は無効となる
}
有効.js
if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
//ここに書いた処理はスマホ閲覧時のみ有効となる
}

使用例

スマホで閲覧時、jQueryのcolorboxプラグイン(モーダルウィンドウ)を無効化する

JavaScript
if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
$(document).ready(function(){
$('.colorbox').colorbox();
});
}

応用

スマホで閲覧時、colorboxプラグインを無効化し、新規ウィンドウで開くようにする

JavaScript
if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
//スマホの場合無効になる処理
$(function(){
$('.colorbox').colorbox();
});
} else {
//スマホの場合有効になる処理
$(function(){
$('.colorbox').click(function(){
  //クリックすると新規ウィンドウで開く
  window.open(this.href,'_blank');
  return false;
})
});
}
HTML
<a href="image.jpg" class="colorbox">
<img src="image_thumb.jpg">
</a>

[追記] colorboxを無効にせずにこっちのほうがいい気がしてきた。
スマホで閲覧時は開く画像がどれだけ大きくても画面内に収まるように、パーセント指定をする

JavaScript
if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
$(function(){
$('.colorbox').colorbox();
});
} else {
$(function(){
$('.colorbox').colorbox({maxWidth:"100%",maxHeight:"100%"});
});
}