Kaori Aihara | Web & Graphic Designer

PC/スマホの判定方法(JavaScript、PHP、WordPress)

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

JavaScript

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

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コードを書けば良い。

WordPress

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

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

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

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

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。