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時の処理
}

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) &amp;amp;&amp;amp; (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ファイルで以下のように呼び出して使う。

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