処理を端末毎に分けて書きたい場合、PHPや、JSで条件分岐を書きたいという事があると思います。
バックエンドエンジニアの方々にとってはあたり前のことかもしれないですが、
WEBデザイナーやコーダーがフロントエンドのコーディングをする際は、メディアクエリでブレイクポイントをわけて、PC・タブレット・スマホの記述をCSSで分けるのが一般的です。
しかし、ブレイクポイントを分けるだけでは効かないときや、特定のデバイスで処理を分けたい場合は、ユーザーエージェントによって条件分岐を作成する必要があります。

下記は、PHPでの条件分岐の記述のメモです。
色々使いどころがあり、例えば、

「デバイス毎に読み込むCSSを分ける」
「デバイス毎に表示する画像を切り替える」
「特定のデバイスだけ特別なCSS,JSの処理を入れたい」

等、色々あるかと思います。

スマホ・タブレット・PCで条件分岐

//スマホの場合に読み込むソースをここに記述

//タブレットの場合に読み込むソースを記述

//PCの場合に読み込むソースをここに記述

スマホとそれ以外で条件分岐する場合

//スマホの場合に読み込むソースをここに記述

//タブレット・PCの場合に読み込むソースをここに記述

スマホ・タブレット・PCで外部CSSの読み込みを切り替える場合

デバイス毎に読み込むCSSを切り替えたい場合は、下記のように、それぞれの、CSSを用意し、読み込ませると良いですね。

//スマホ用のCSSを読み込む


//タブレット用のCSSを読み込む


//PC用のCSSを読み込む

スマホ・タブレット・PCで画像の表示を切り替える場合

デバイス毎に画像の表示を切り替えたい場合は、下記のように、それぞれ画像を用意し、読み込ませると良いですね。
レスポンシブで画像切り替えの場合、display:none;で画像の表示・非表示を行うと、全ての画像をダウンロードしてから非表示にするので、重くなりがちですが、こちらの処理を使用すると、サーバ側で処理を行ってからブラウザに表示されるので、読み込む速度を速くする事が可能になると思います。

//スマホ用


//タブレット用


//PC用

まとめ

うまく使いこなす事で、デバイス毎のバグ回避や、読み込み速度の向上が期待できますので、実際に案件で積極的に取り入れる機会が増えそうですね。

Wordpressでナビに投稿記事のカテゴリ一覧メニューを表...

Wordpressで不動産会社の物件検索webサイトを構築す...