【jQuery 】デバイスを判定する方法

デジタルデバイスの多様性が増す現代において、ウェブサイトやアプリケーションがどのデバイスからアクセスされているのかを知ることは非常に重要です。今回は、jQueryを使用してデバイスを判定する3つの基本的な方法を紹介します。

User Agentを使った方法
画面サイズを使った方法
専用ライブラリを使った方法
まとめ

User Agentを使った方法

User Agentは、ブラウザやOSの情報を含む文字列です。この情報を利用して、特定のデバイスやブラウザを判定することができます。

$(document).ready(function() {
    var ua = navigator.userAgent;

    if (ua.match(/iPhone|iPad|iPod/i)) {
        console.log('This is an iOS device.');
    } else if (ua.match(/Android/i)) {
        console.log('This is an Android device.');
    } else {
        console.log('This device is neither iOS nor Android.');
    }
});

画面サイズを使った方法

デバイスの画面サイズを基に判定を行う方法です。主にレスポンシブデザインの際に使用される方法で、デバイスの大まかなカテゴリを判断することができます。

$(document).ready(function() {
    var width = $(window).width();

    if (width <= 480) {
        console.log('This might be a mobile device.');
    } else if (width <= 768) {
        console.log('This might be a tablet.');
    } else {
        console.log('This might be a desktop.');
    }
});