スマートフォンかどうかの判定

現在閲覧中のデバイスは、不明と判定しています。

なぜスマートフォンを判定するのか

スマートフォンを判定するのは、スマートフォンを区別して出力したほうがいい場合があるからです。
つまり、スマートフォンの場合は異なるHTMLを出力します。

一般的に、環境を問わず同じHTMLを出力すべきとされていて、画面の幅によってCSSで表示方法を変更するレスポンシブWebデザインが推奨されています。
その理念はわかるのですが、CSSでは見せ方は変えられてもHTMLを変更するわけではないので、HTML自体に手を加えたい場合は、レスポンシブWebデザインでは対応できません。

個人的によくやるものとしては、スマートフォンでアクセスした場合のみ、電話番号をリンクにするというもの。
a要素のhref属性の値を、"tel:（電話番号）"とすれば、電話をかけられるリンクになりますが、電話をかけられないパソコンやタブレットでは、クリックやタップができても機能しないリンクになってしまいます。
これを避けるため、スマートフォンでアクセスした場合のみ電話番号をリンクにし、それ以外のデバイスでは電話番号をリンクにせずに表示します。
そのほうが、ユーザーの誤認識・誤操作を防げるからです。

ちなみに、CSSのpointer-eventsプロパティを使っても電話番号のリンクを無効化できますが、判定基準がスマートフォンかどうかではなく、画面サイズになってしまうのが残念なところです。

どうやってスマートフォンを判定するのか

スマートフォンの判定には、ユーザーエージェントを使います。
ユーザーエージェントは偽装することができ、歴史的背景もあって冗長かつ正確ではありませんが、スマートフォンを判定するために使う分には有効です。

具体的には、ユーザーエージェントに「AndroidかつMobileを含む、またはiPhoneを含む」ものをスマートフォンと判定します。
正規表現で書くと、「Android.+Mobile|iPhone」です。
PHPでもJavaScriptでも、ユーザーエージェントを取得して、その文字列が正規表現に一致するかどうかでスマートフォンを判定することができます。

iPhoneはそのままでいいんですけど、Androidの場合はMobileを含むかどうかも調べる必要があります。
Mobileを含めないと、Androidタブレットまでスマートフォンと判定してしまうからです。

冒頭の表示も、この方法を使ってJavaScriptでスマートフォンかどうかを判定したものです。