jQueryでブラウザの横幅やデバイスの種類で条件分岐させる方法

jQueryで、ブラウザの横幅やデバイスの種類で条件を指定する方法をご紹介いたします。

スマホのみに適用したい処理がある場合などに活用できますので、結構利用シーンは多いかと思います。

jQueryでブラウザの横幅やデバイスの種類で条件分岐させる方法

横幅で判断する場合

最もシンプルなのが、ブラウザの横幅で判断する方法です。

$(document).ready(function(){
  if ($(window).width() < 1024) {
    //横幅1024px未満の時の処理
  } else {
    //それ以外の処理
  }
});

このように「if ($(window).width() < 1024)」で横幅の条件を指定します。

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

ユーザーエージェントで判断するには、以下のように指定します。

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

「navigator.userAgent.indexOf」でデバイスを指定します。

あとがき

最近ではサイト制作する際は、スマホ対応は当たり前になっています。jQueryで色んな処理を行う場合に、スマホ・タブレットとPCで条件分岐させると、より思い通りの処理を実装することが可能になりますので、覚えておくと便利です。