BLOG

2014年6月1日/

[PHP]ユーザーエージェントを取得してCSSを切り替える方法

 

以前、ブラウザの幅によってCSSを使い分けるMedia Queriesを使用したレスポンシブデザインの実現方法を紹介しました。

→[CSS] Media Queriesを使って画面サイズに合わせてCSSを適応する。

 

今回はユーザーエージェント(以下UA)を取得し、閲覧端末がスマートフォンかどうかを判断して適応するスタイルシートを変える方法を紹介します。

 

※UAとはブラウザがWEBサイトにアクセスした際に送信する情報で、端末やブラウザなどのデータが含まれております。

 

PCサイト用に作ったスタイルシートを「style.css」、スマートフォン用に作ったスタイルシートを「sp_style.css」とします。

 

 

まずUAをチェックしてスマートフォンかどうかをチェックする関数sp_checkを作成します。

で閲覧端末のUAを取得できます。

では、取得したUAの中に「iPhone」又は「Android」かつ「Mobile」が見つかった場合にtrueを返し、見つからない場合はfalseを返すといったものになります。

 

Androidの場合はタブレットもありますが、「Android」と「Mobile」の両方が含まれている場合にスマートフォンと判断できるようです。

 

※iPhone,Android,Mobileは大文字小文字が区別されるので間違って「iphone」などと書くと判断できなくなるので注意しましょう。

 

あとは、<head>の中のスタイルシートを指定するところで、

とすることで、スマートフォンの場合は「sp_style.css」を、その他(タブレットやPC)の場合は「style.css」を参照するようになります。

 

 

 

Resent Posts

Category