PC／スマホの判定方法（JavaScript、PHP、WordPress）

PCかスマホの判定をする時、JavaScript、PHP、WordPressのやり方を一目で確認したいな、と思う時があるのでこちらにメモです。

JavaScript

使う関数… matchMedia(): CSSのメディアクエリのように、開いているウィンドウサイズに応じて分岐させることができる。
matchMedia() ではMediaQueryList（参照：MDN web docs）を返すので、その戻り値がリストに一致するかしないかをmatchesで判定し、Booleanで返す。

let mediaQuery = matchMedia('max-width: 600px'); // MediaQueryListが変数mediaQueryに入る
  let isMobile = mediaQuery.matches; // 変数isMobileに、trueかfalseが入る
    
  if (isMobile) {
    // true時の処理
  } else {
    // false時の処理
  }

let mediaQuery = matchMedia('max-width: 600px'); // MediaQueryListが変数mediaQueryに入る

let isMobile = mediaQuery.matches; // 変数isMobileに、trueかfalseが入る

if (isMobile) {

// true時の処理

} else {

// false時の処理

}

PHP

使う関数… $_SERVER[‘HTTP_USER_AGENT’]: $_SERVER[‘HTTP_USER_AGENT’]で閲覧者のブラウザやOS等の以下のような情報を取得して判定する。

取得例：

【Mac / Chrome】: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3864.0 Safari/537.36
【Win / Firefox】: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0
【iPhone】: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1
【Android（注1）】: Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.53 Mobile Safari/537.36

iPhoneの場合はiPhone、iPadの場合はiPadとそれぞれ文字列が入る。
Androidの場合はスマホであってもタブレットであってもAndroidという文字列が入り、スマホにはさらにMobileという文字列が入る。

注1) Androidの一部の古い機種ではタブレットでも「Mobile」が入ってしまうものもあるようなので、そこまで加味するかは検討が必要。
注2) 新規販売が終了しているWindows Phoneも「Windows Phone」という文字列を取得できるが、これもまた判定基準に加えるかどうか要検討。

あとは、「その文字列を含んだら」という分岐をさせるため、strpos()を使って以下のようにPHPコードを書けば良い。

<?php
  //ユーザーエージェントを取得（上のような文字列が取得される）
    $ua = $_SERVER['HTTP_USER_AGENT'];
  
  //スマホ、タブレット、それ以外（PC）を判定する
    //スマホの判定（Android且つMobileまたはiPhoneを含む文字列の場合）
    if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) ||
      (strpos($ua, 'iPhone') !== false)) {
      //スマホの場合の処理
      
    //タブレットの場合（Mobileを含まないAndroidまたはiPadの文字列を含む場合）
    //PCとタブレットで処理が同じ場合はelseのみでよい
    } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) {
      //タブレットの場合の処理
      
    } else {
      //PCの場合の処理
      }
  ?>

<?php

//ユーザーエージェントを取得（上のような文字列が取得される）

$ua = $_SERVER['HTTP_USER_AGENT'];

//スマホ、タブレット、それ以外（PC）を判定する

//スマホの判定（Android且つMobileまたはiPhoneを含む文字列の場合）

if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) ||

(strpos($ua, 'iPhone') !== false)) {

//スマホの場合の処理

//タブレットの場合（Mobileを含まないAndroidまたはiPadの文字列を含む場合）

//PCとタブレットで処理が同じ場合はelseのみでよい

} elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) {

//タブレットの場合の処理

} else {

//PCの場合の処理

}

WordPress

使う関数… wp_is_mobile()またはfunctions.phpに呼び出す関数を作る: wp_is_mobile()はスマホならtrue、それ以外ならfalseを返すが、タブレットは全てモバイルに含まれてしまう。
wp_is_mobile（参照：WordPress Codex）

そのため、WordPressではfunctions.phpにis_mobile()という関数を作り、外部のPHPファイルから簡単に呼び出してboolean型で結果を呼び出す方法が多く使われている。

<?php
    function is_mobile() {
      $useragents = array(
        'iPhone',
        'iPod',
        'Android.*Mobile',
        'Windows.*Phone',
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
      );
      
      $pattern = '/' . implode('|', $useragents) . '/i';
      return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
    }
  ?>

<?php

function is_mobile() {

$useragents = array(

'iPhone',

'iPod',

'Android.*Mobile',

'Windows.*Phone',

'dream', // Pre 1.5 Android

'CUPCAKE', // 1.5+ Android

'blackberry9500', // Storm

'blackberry9530', // Storm

'blackberry9520', // Storm v2

'blackberry9550', // Storm v2

'blackberry9800', // Torch

'webOS', // Palm Pre Experimental

'incognito', // Other iPhone browser

'webmate' // Other iPhone browser

);

$pattern = '/' . implode('|', $useragents) . '/i';

return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);

}

あとはPHPファイルで以下のように呼び出して使う。

<?php
    if (is_mobile()) {
      //スマホの場合の処理
    } else {
      //タブレット＆PCの場合の処理
    }
  ?>

<?php

if (is_mobile()) {

//スマホの場合の処理

} else {

//タブレット＆PCの場合の処理

}

なぜWordPressのfunctions.phpにPHPの章で書いたコードを書かないのかがわからない…涙
blackberryとかを入れてないから？いや…