レスポンシブwebデザインとMedia Queriesと困った時のJavaScript

レスポンシブwebサイトは必須?

レスポンシブwebデザイン(Responsive Web Design)とかいうと、「なんか、何?」って感じですが、パソコンのブラウザーで見ることを前提としたサイトから、一つのHtmlソースからPCとiphone・Androidをはじめとするスマートフォン、ipadなどのタブレットを全て・またはPCとスマホなどの組み合わせてでいくつかのターゲットに向けてサイト制作していくものですね?

レスポンシブwebデザインとかいう言葉は半年前に知りましたが、いわゆるメディアクエリ(Media Queries)を使ってcss振り分けてって感じで初めてスマホ・PC兼用サイトを作ったのが1.4年位前でした。

レスポンシブwebサイトは必須?
レスポンシブwebサイトは必須?


スマートフォンのどれを中心に置くか

初めて作った頃は、スマホサイトというよりiphoneサイトという感じでしたが、今は機種も多く解像度もまちまちで、どれをターゲットにしていいかで変って来ますね。

スマートフォン機種と解像度

解像度1,280×800って、パソコン並みです。

当然スマートフォンで利用されるブラウザの幅を基準に考えるわけですが、以前はこんなコードでOKだったのですが。

iphone基準の縦横指定


<link rel="stylesheet" href="smartphone.css" 
media="only screen and (min-device-width : 320px) 
and (max-device-width : 480px)">

iphoneの縦横だけ考えていればよかったのですね。

現在はもっとデバイスが多くなって。CSSもたくさん書かなければなりません(コードはhtml head部分に記述するもの)。
基準はページビューがとても多いと言われているiphone向けが中心でいいのかもしれません。

これは「一番小さいデバイスの表示幅が320pxで最大幅が480pxだったらsmartphone.cssを使いなさい」ということ。

もう一つ例;

ipad基準の縦横指定


<link rel="stylesheet" href="ipad.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)">

これは「一番小さいデバイスの表示幅が768pxで最大幅が1024pxだったらipad.cssを使いなさい」ということ。

此の辺までは普通に使っていたのですが、そのほかにもたくさんサンプルコードが掲載されているサイトがここ

でも、このやり方だとちょっと困ることがあります。

はじめからメディアクエリを使って作る!というサイト設計をしなければなりません。スマホは特に細かすぎるナビゲーションは行き先を迷わせるだけになってしまいますので、パソコンサイトのグローバルナビだけでもいいケースが多いですね。

すると、sidebarなどは display: none; などで「消してしまい」その他のレイアウトのみでcssを書いていけばいいのですが・・・。

スマホサイト作り
スマホサイトとパソコンサイト

はじめからそうした設計なら問題ないのですが、既存のページをスマートフォン化する場合に、「sidebarにあるバナーはとても重要だから絶対外したくない!」となるとこの方法は使えなくなります(まあ、もっと別の方法もありますが手間がかかります)。

そんな場合はjavascriptですね。

スマートフォン専用サイト(スマホ最適化サイト)へ転送するJavaScript


<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0 &&
navigator.userAgent.indexOf('iPad') == -1) ||
navigator.userAgent.indexOf('iPod') > 0 ||
navigator.userAgent.indexOf('Android') > 0) {
location.href = '/smartphone/';
}
</script>

スマホだけ専用サイトに転送しちゃいます。「/smartphone/」 がそのディレクトリ(名前は書き換えOK)で、そこに新たにhtmlを書いていけばOK。
もちろん、その専用サイトでデバイス幅にあわせてCSSを書いていけば、「やろうと思えば」パーフェクトなスマホサイト対応も可能になります。

私もiphone4を使っていますが、パソコンサイトでもサイドバー部分を端にどけてみちゃいます。「ヘンな感じ」でスマホ最適化してもらうより全然読みやすかったりします。

ですので、やるならしっかりスマートフォンにあったサイトを作っていこうと考えています。

コメントを残す

メールアドレスが公開されることはありません。