2019/12/26ユーザーエージェントを判定し、bodyに特定のクラスをつける方法【jQuery】サイトを制作するときにWindowsとMac、AndroidとiPhoneなど、OSや機種によって処理を変更することがありますよね。今回はjQueryでユーザーエージェントを判定して、bodyに特定のクラスをつける方法を紹介します。ユーザーエージェントで判定する内容は以下のとおりWindowsかMacか判定ChromeやIE、Safariなどブラウザを判定パソコン、タブレット、スマホを判定AndroidかiPhone、iPadか判定UserAgentを判定し、bodyに特定のクラスをつけるjQueryを使ってUserAgentを判定させるので、jQueyの読み込みは忘れないようにしましょう。あとはuserAgent.jsというファイルを作って同じように読み込ませます。このファイルは今の段階では何も書かれてなくてOKです。src="path/to/userAgent.js"></script>次に以下のコードをuserAgent.jsにコピペします。});userAgent.jsへコピペができたら、さっそくbodyにどんなクラスがついているか確認してみましょう。ぼくのサイトの場合、3つのクラスがついていました。クラスを見ると、パソコンのWindowsでChrome使っていることがわかります。特定のクラスを使って、フォントを変更するそれでは実際にこのクラスを使ってフォントを設定してみます。Japanese、それ以外は游ゴシックにしてみましょう。jQueryで特定のクラスがあるか調べて、フォントを定義したクラスを付与します。sans-serif;}さいごに...画面サイズの条件分岐だけではなく、ユーザーエージェントを使った条件分岐ができれば、もっと細かい設定ができるようになります。例としてフォントの変更をしましたが、それ以外にもスマホのときは表示させない設定やアニメーションの動きをパソコンとスマホで分けることもできます。コピペで簡単にできる設定なのでぜひ試してみてください。