PCとスマホでJSの処理を変更する方法

PCとスマホで表示を変える方法

CSSであれば、メディアクエリを使って画面幅に応じたスタイルを当てるようにすると思います。
しかし、出したい要件がPCとスマホで全然違っていたり、どうしても配置を変えたいけどCSSだけじゃ対応しきれない場合など、PC、スマホでソースを書き換える時にJSで表示の条件分岐をする方法を紹介します。

どういった方法を使うのか

JSでPC、スマホで表示を変えようと思った時に使う方法は主に２つあります。
１つは画面幅を取得して、その画面幅を元にPCかスマホかの判定をするパターン
２つ目は、UserAgent(ユーザーエージェント)の値を取得して何のデバイスで見ているかを判定するパターンです。

画面幅で判定をする場合

画面幅で判定をする場合は、下記のような処理を行います。
デバイスではなく画面幅に依存するため、スマホでも縦向きで見る時、横向きで見る時の処理を変えたり柔軟な対応が行えます。

var windowWidth = $(window).width();
var windowSm = 640;
if (windowWidth <= windowSm) {
    //横幅640px以下（スマホの場合の処理）
} else {
    //横幅641px以上（PCの場合の処理）
}

UserAgent(ユーザーエージェント)で判定をする場合

UserAgent(ユーザーエージェント)を判定をする場合は下記のような処理を行います。
デバイスや使用ブラウザに応じて処理を変更するため、先ほどのようにスマホの縦向き、横向きで処理を変えると言った事は出来ませんが、細かいデバイスの指定が出来るため、iPhoneの場合、Androidの場合、iPadの場合で処理を変えたり、PCでも、MacBookの場合、Windowsの場合、chromeの場合、safariの場合などの細かい指定が出来ます。
下記の参考ソースでは、PC、スマホで処理を変えるために「iPhone,iPod,Android」の場合と、それ以外の場合で処理を変更しています。

if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
    // スマホの場合の処理
} else {
    // PCの場合の処理
}

まとめ

用途やサイト全体の作りに応じてどちらを使うか、両方を使うかなど考えながら使ってみてください。
どちらの方法もそれぞれメリット・デメリットがありますが、実際にはもっと細かく指定する事で、タブレットの場合はどうするか、小さなモニターではどうするか等、詳細な設定が行えます。