レスポンシブWEBデザインでスマートフォン閲覧時だけ特定要素を表示する

レスポンシブWEBデザイン。Googleは、スマートフォン(モバイル)サイトをレスポンシブWEBデザインにすることを推奨しています。

WordPressのデフォルトテーマ「TwentyEleven」がレスポンシブWEBデザインですし、個人ブログではよく見かけます。最近では、商用サイトでもよく見るようになりました。

レスポンシブWEBデザインは、基本的にワンソース・マルチユースなので、コンテンツの内容はPC閲覧時でも、スマートフォン閲覧時でも同じです。ただ、PCの時だけ表示したい、スマホ閲覧時だけ表示したいということがあります。

特定のデバイスからの閲覧時のみ表示する方法として、簡単にできる方法を2つご紹介。それぞれデメリットと考えられることがあるので、自分の中で良いと思う方法を選べばいいのかなと。

CSS3のMedia Queriesを使って画面解像度によって表示・非表示に

CSS3のMedia Queriesを使って、画面解像度によって要素の表示・非表示をCSSで切り替える方法です。一般的なレスポンシブWEBデザインそのものが、この方法を使っています。

例えば、外部CSSで指定の画面解像度の時だけ呼び出すのであれば、以下の様な記述になります。

<link rel="stylesheet" media="screen and (max-width: 480px)" href="スマホ用CSS" />

1つのCSSファイル内で、分けて記述する場合は以下のように、「@media screen and (max-width: ○○)」や「@media screen and (min-width: ○○)」と記述します。

@media screen and (max-width: 480px) {
 スマホ用のスタイルを記述
 }

この方法のメリットは、CSSで記述しているのでJavascriptが無効であっても関係ありません。ただ、PC(もしくはスマホ)閲覧時には完全に非表示となります。ソースに存在しているのに、表示上見せないということは、隠しテキスト(リンク)と同じ状態です。SEOの観点からするとデメリットが大きいかもしれませんね。

Javascriptでデバイスを判定、振り分けて表示する

Javascriptでデバイスを判定し、特定のデバイスの時だけ要素を挿入する方法です。つまり、HTMLファイル内に、その要素は存在しません。

以下を記述したJSファイルを要素を挿入したい箇所で呼び出せば、iPhoneとAndroidで閲覧した時にだけ、表示されます。

if(navigator.userAgent.indexOf("iPhone") != -1 && navigator.userAgent.indexOf("Android") != -1 && navigator.userAgent.indexOf("iPad") == -1){ 
 document.write(
 'ここに表示する要素を記入'
 );
}

この方法だと、IE6やIE7を対象範囲に入れているWEBサイトでも問題なく使えます。

デメリットは、Javascriptが無効になっている環境では呼び出されません。また、HTMLソース上に存在しない要素なので、SEO的には不利です。ですから、例えばスマホ閲覧時だけリンク付きの電話番号を表示したいとか、Facebookのリンクを設置したいとか、リンクの重要度が低い要素を挿入する場合に使うと良いと思います。

Javascriptによる振り分けを使ったほうが良いかも

個人的には、Javascriptによる振り分けを使ったほうが良いかなと思います。

Androidは機種によって画面解像度が違いますし、iPhoneも5は画面解像度が違いますし。Media Queriesを使うのは面倒なんですよね……。PCでもウィンドウサイズを小さくすれば表示されますし、画面解像度をどれだけ指定するかなど決めることも多いです。

Javascriptの場合は、ユーザーエージェントで判定するので、PCから閲覧した場合はウィンドウサイズに関わらず表示されません。画面解像度に関わらず、AndroidやiPhoneからのアクセスを判定して動作します。

今後はどうかわかりませんが、現時点ではJavascriptかなぁ。

公開:2013/02/04 | 更新:2013/12/16