アクセスしてきた端末が、デスクトップなのか?タブレットなのか?スマートフォンなのか?
それをユーザーエージェントで判別する。
UserAgent(ユーザーエージェント)とは?
Webブラウザやその他のクライアントソフトウェアがサーバーにアクセスする際に、自分の情報をサーバーに伝えるための文字列です。この文字列には、使っているブラウザの種類、バージョン、OS(オペレーティングシステム)やデバイスの情報が含まれています。
こんな形の文字列が渡されて、ウェブサーバーで判断ができます。
Mozilla/5.0 (Linux; U; Android 4.0.3; de-ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
モバイル端末を判断する
まず最初に、モバイル端末かを判定する。
これはとてもシンプルです。
MDNにメモがある通り、ユーザーエージェント文字列にMobi
が含まれているかどうかで判断ができる。
https://developer.mozilla.org/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent
要するに、モバイル端末を検出するには、ユーザーエージェント文字列のどこかに文字列
Mobi
があるかどうかを探すことをお勧めします。
iPad, Android タブレットを判断する
Androidのタブレット判定は、ユーザーエージェントに「android」と「mobile」が含まれているかどうかを見て、判断することができます。この二つの文字列が存在するときはAndoridモバイル端末、そうでなければAndroidタブレット端末だ。
https://developers.google.com/search/blog/2011/03/mo-better-to-also-detect-mobile-user?hl=ja
一方で、iPadはシンプルで、ユーザーエージェントに「ipad」が含まれているかどうかで判断できる。含まれていればiPadタブレットだ。
ただし、iPadには「デスクトップ用Webサイトを表示」機能がある。これをONにしているユーザーのユーザーエージェントは「ipad」から「macintosh」に切り替わるので注意が必要だ。
デスクトップを判断する
上記の2パターンを考慮して、それ以外の時はデスクトップからのアクセスと判断ができる。
Summary
モバイル端末かどうか、を判断するのはとてもシンプルな条件式で書ける。
ただし、任天堂スイッチなどのハードからのアクセスにはMobi
の文字列は含まれないので、別途調査して対応を検討する必要はある。