ユーザーエージェント(UA)を使わずにスマホ判別する「CSS3 Media Queries」

スマホやモバイルからのアクセスをユーザーエージェント(UA)で判定し、それぞれのURLへリダイレクトさせたり、それぞれで別個のCSSやJSファイルを読み込んだり。UA判別による振り分けは、よくやるっちゃよくやります。

モバイル(ガラケー)の場合は、UA判別が一般的。スマホの場合はというと……、スマホ専用サイトを用意してリダイレクトする場合はUA判別ですが、レスポンシブ・ウェブデザインの場合は「CSS3 Media Queries」を使った判別方法も使われています。

CSS3 Media Queries とは

CSS3の「Media Queries」では、画面サイズなどを数値で指定した条件によって、スタイルを適用させる機能です。

よく使われているのは、ウィンドウ(view port)の幅に応じて振り分ける方法。以下のように記述します。

@media screen and (min-width: 768px) {
   /* view portが768px以上の場合に適用される */
   div#wrapper { width: 960px; }
}
@media screen and (max-width: 479px) {
   /* view portが479px以下の場合に適用される */
   div#wrapper { width: 100%; }
}

組み合わせることもできるので、例えば「view portが480px以上767px以下」といった指定も可能。

他にも、高さや、view portではなくデバイスのサイズ、デバイスの向きなどで指定することができます。このあたりは、以下の記事が詳しいかと。

それぞれ一長一短あり

メリット・デメリットは、製作者の意図によって変わってきます。それぞれの方法に一長一短があるので、どちらも使われているんじゃなかろうかと。

デバイスごとの表示という点では、UA判別のほうが確実です。アクセスしてきたUAがスマホの場合はこれ、PCの場合はこれといった感じで決め打ちできます。

Media Queriesはウィンドウサイズやデバイスの画面サイズによって判定するので、様々な解像度があるPCでは、製作者が意図した表示で見てもらえないケースが出てきます。

AndroidのUAの種類にバラつきがあるので、UAを調べて指定するのが面倒です。ただ、画面サイズもバラつきがあるので、Media Queriesで細かく指定する場合も面倒です。どっちもどっちですね。というか、Androidがね……。

実装にかかる手間は大差ない

UA判別にしろ、Media Queriesを使った判別にしろ、実装をする手間に違いはありません。

レスポンシブ・ウェブデザインのスタイルを設定する際にとる方法は2つあります。完全に独立したスタイル(CSSファイル)を適用させるか、デバイスによってスタイルを上書きするか、です。どちらの判別方法を使っても、このやり方は変わりません。

サイトを更新・管理することを考えると、それぞれ独立したスタイルを適用する場合は、別々のCSSファイルを読み込んだほうが管理しやすいです。この方法はどちらでもできます。

デバイスによって大きく違いがなく、一部スタイルを上書きする程度で良いのであれば、1つのCSSファイルに記述してしまったほうが管理しやすい。この場合は、Media Queriesを使うことになります。

まとめ

実装に違いはないので、状況によって選択するのが良いかと。ただ、クライアントに指定されることが稀にあるので、どちらにも対応できるようにはしておきたいですね。

今までの経験では、CSSをデバイスやview portごとに用意するほど、スタイルを記述するケースってありません。そう考えると、Media Queriesのほうが使い勝手は良いかもしれません。

一方で、デバイスごとに表示する要素を変えたい場合。この場合は、JSで切り替えることになるので、振り分けもUA判別でやってしまっても良いのかなと。

公開:2013/06/04 | 更新:2016/06/17