LoginSignup
61
62

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-03-11

ユーザーエージェントでスマホか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%"});
});
}
61
62
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
61
62