追記（2023-06-15）
本記事の内容はやや古くなっています。User Agent文字列のみに頼ったモバイルデバイス判定は将来的に機能しなくなる予定のため、対応した新しい記事を別で書きました。
モバイル判定JavaScriptコード
ブラウザのユーザーエージェント文字列からデバイスが電話かどうか判定するコード
電話系のデバイスのときにはtrue、そうでないときにはfalseを返す
例えば、androidスマホについては、ユーザーエージェントにandroid,mobileの2つの文字列を含むことにより判定している
コード
(function(){
var ua = navigator.userAgent.toLowerCase();
var sdev = /iphone;|(android|nokia|blackberry|bb10;).+mobile|android.+fennec|opera.+mobi|windows phone|symbianos/;
return sdev.test(ua);
})();
コード中の正規表現のレールロードダイアグラム
ブラウザのユーザーエージェント文字列について、たとえば、
「何かの文字列 → iphone; → 何かの文字列」
「何かの文字列 → android → 何かの文字1文字以上 → mobile → 何かの文字列」
「何かの文字列 → nokia → 何かの文字1文字以上 → mobile → 何かの文字列」
のように表すことができればtrueが返ってくる。
このとき、ユーザーエージェント情報の大文字小文字は考慮しない。
たとえば、Androidスマートフォン「Galaxy Note 3」のユーザーエージェント文字列は、Mozilla/5.0 (Linux; U; Android 4.3; en-us; SM-N900T Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30である。
これは、
「何らかの文字列(Mozilla/5.0 (Linux; U; ) → Android → 何らかの文字1文字以上(4.3; en-us; SM-N900T Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0) → Mobile → 何らかの文字列( Safari/534.30)」と表せる、即ち上記のレールロードダイアグラムに適合できる文字列であるため、この正規表現に合致する。
よってこの関数はGalaxy Note 3のユーザーエージェント文字列に対してtrueを返す。
判定について解説
iPhoneの判定
iPod、iPadのUAにもiPhoneの文字列が含まれることがあるため、iphone;の文字列によって判定している
Mozilla/5.0 (iPod touch; CPU iPhone OS 8_1_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B435 Safari/600.1.4
Mozilla/5.0 (iPad; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) FxiOS/1.0 Mobile/12F69 Safari/600.1.4
Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1
アンドロイドスマホの判定
androidのみだとタブレットを含んでしまうため、mobileの文字列があることを同時に確認している
Mozilla/5.0 (Linux; Android 4.3; Nexus 10 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.81 Safari/537.36
Mozilla/5.0 (Linux; Android 7.0; SO-01J Build/39.2.B.0.244) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.83 Mobile Safari/537.36
改善の余地があると思うので、ご指摘頂けると嬉しいですm(_ _)m
参考