【初心者でもわかる】PCとスマホでjavascriptを切り換える2つの方法（画面サイズ・デバイス）

どうも7noteです。PCとスマホでjavascriptを切り換える2つの方法（画面サイズ・デバイス）

PCだけに効かせたいjavascript。スマホだけに効かせたいjavascript。
そんなのを書き分ける2つの方法を紹介できればと思います。

・画面サイズ
見ている画面サイズによって切り分ける方法です。そのためPCでも画面幅を小さくすればスマホと同じような挙動をします。

・ユーザーエージェント
ユーザーエージェント。言い換えればデバイスの種類ごとに判定してjavascriptを書き分ける方法です。

どちらも書き方は難しくなく直感的にコピペだけで使用することができます。

※jqueryを使用しております。jqueryってなんだという方はこちら

書き方

●画面サイズ（幅）で判別してjavascriptを書き分ける方法

script.js

$(function () {
  $(window).on('load resize', function(){
    var replaceWidth = 768; //ブレイクポイント設定
    var windowWidth = parseInt($(window).width());
    if (windowWidth >= replaceWidth) {
    // PC用コード
    }else {
    // スマートフォン用コード
    }
  });
});

●ユーザーエージェントで判別してjavascriptを書き分ける方法

script.js

$(function () {
  var ua = navigator.userAgent;
  if (ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1)) {
    // スマートフォン用コード
  } else if (ua.indexOf('iPad') > -1 || ua.indexOf('Android') > -1) {
    // タブレット用コード
  } else {
    // PC用コード
  }
})

まとめ

ユーザーエージェントで判別する際に、PCとスマートフォンの2種類でしか分けないという場合は、真ん中のelseifは削除して以下のような形でお使いください。

script.js

$(function () {
  var ua = navigator.userAgent;
  if (ua.indexOf('iPhone') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1)) {
    // スマートフォン用コード
  } else {
    // タブレット・PC用コード
  }
})

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ