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