東京のホームページ制作・WEBデザインオフィス「SKYGOLD」

PC・タブレット・スマホのデバイス別にPHPの条件分岐で処理を入れる方法

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

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

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

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

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

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

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

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

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

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

まとめ

うまく使いこなす事で、デバイス毎のバグ回避や、読み込み速度の向上が期待できますので、実際に案件で積極的に取り入れる機会が増えそうですね。
W r i t e r
KEiSoN★
スカイゴールド株式会社 代表取締役 / webデザイナー
2009年1月よりフリーランスのwebデザイナー/ディレクターとして活動しながら、ノマドな働き方を試み始める。 過去16カ国ほど訪れ、一眼レフにその景色を収めながら時々ドローンも飛ばす。 2015年11月にスカイゴールド株式会社として法人化。 現在は主に日本・タイを年間3,4回ほど往復しながら活動中。 Wordpressを使用したオウンドメディア構築を得意とする。 国内外の様々な価値観・デザインに接触することで幅広いクリエイティブや臨機応変にアイデアを提供する。 旅と音楽と酒と料理作りが好き。
アーカイブ