【jQuery】スマホのみ処理を実行する方法

Webサイトやアプリケーションを開発する際、デバイスに応じた特定の処理を実装したいときがあります。特に、スマートフォンのユーザーにのみ特定の機能や表示を提供したい場合、どのようにデバイスを判別すればよいのでしょうか。この記事では、jQueryを使用してスマートフォンのみの処理を実行する方法をいくつか紹介します。

ユーザーエージェントを確認する

ユーザーエージェントを利用して、アクセスしているデバイスの種類を判別することができます。

$(document).ready(function(){
    var ua = navigator.userAgent;
    
    if(/iPhone|iPad|iPod|Android/i.test(ua)){
        // スマホの場合の処理をここに書く
    }
});

ウィンドウの幅を使用する

ビューポートの幅を利用して、デバイスの大きさを推測する方法です。

$(document).ready(function() {
   if ($(window).width() <= 768) {
       // スマホの場合の処理
   }
});

CSSメディアクエリと.resize()イベントを併用する

CSSのメディアクエリと連動させて、特定の条件下でのみjQueryの処理を実行する方法です。

$(document).ready(function() {
   function checkDevice() {
       if ($('selector').css('property') == 'value') {
           // スマホの場合の処理
       }
   }
   $(window).resize(checkDevice);
   checkDevice();
});

Modernizrライブラリを使用する

Modernizrは、Webブラウザの機能検出をサポートするライブラリです。

Modernizr: the feature detection library for HTML5/CSS3

modernizr.com

Window.matchMedia()メソッドを使用する

matchMedia()メソッドはJavaScriptのネイティブな方法で、メディアクエリのマッチをプログラムで検出します。

if (window.matchMedia("(max-width: 768px)").matches) {
   // スマホの場合の処理
}

特定のライブラリやフレームワークを使用する

Device.jsなど、デバイスの種類を簡単に判別するライブラリも利用できます。

GitHub - matthewhudson/current-device: 📱 The easiest way to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry, Windows, Firefox OS, MeeGo), orientation (Portrait vs. Landscape), and type (Tablet vs. Mobile).

📱 The easiest way to write conditional CSS and/or JavaScript based on device operating system (iOS, Android, Blackberry,...

github.com