CSS Media Queriesでスマートフォン対応しました。

TOP > てきとうにこらむ > このサイトについて。 > CSS Media Queriesでスマートフォン対応しました。

CSS Media Queriesを試してみる

Googleのブログによると、スマートフォンサイトに対しては、CSS Media Queriesがいいらしい。

というわけで、このサイトで対応させてみました。

困った

Internet Explorerについて

困ったのが、やはりIE(8以下)。Media Queriesを使用するには、css3-mediaqueries.jsを使えばいいんだけど、これ@importや<link>タグや、<style>が使えないため、外部CSSが読めないのです。

対策

結局、Internet Explorer 6,7,8では、無視するように以下のように書きました。

<!--[if lte IE 8]>
<script src="/js/html5.js" type="text/javascript"></script>
<script src="/js/excanvas.compiled.js"></script>
<link rel="stylesheet" type="text/css" href="/css/default.css">
<link rel="stylesheet" type="text/css" href="/css/parts.css">
<![endif]-->
<link rel="stylesheet" type="text/css" href="/css/responsive.css">

つまり、Internet Explorer 6,7,8では、default.cssとparts.cssを読み込ませてしまい、その他のブラウザではresponsive.cssを読みこませます。responsive.cssには、CSS Media Queriesがあり、Internet Explorer 6,7,8では無視するため無効になるんですが、他のブラウザではCSS Media Queriesが有効となります。

responsive.cssは以下の様な感じで。上2行がスマートフォン向け、中2行がスマートフォン横向き、下2行がPC向け。Internet Explorer 6,7,8では使えないため無視。もう知ったこっちゃない。Internet Explorer 9では使えるし。

@import url("/smartphone/css/default.css") only screen and (min-width: 0px) and (max-width: 480px);
@import url("/smartphone/css/parts.css") only screen and (min-width: 0px) and (max-width: 480px);

@import url("/smartphone/css/default_pad.css") only screen and (min-width: 481px) and (max-width: 800px);
@import url("/smartphone/css/parts_pad.css") only screen and (min-width: 481px) and (max-width: 800px);

@import url("/css/default.css") only screen and (min-width: 801px);
@import url("/css/parts.css") only screen and (min-width: 801px);

Canvasについて

Androidブラウザで、なぜかアスペクト比が狂う。どういうことかというと、以下のように、canvas.widthとcanvas.heightを設定するという条件で、AndroidブラウザだけCSSのmax-widthを設定すると、幅だけが設定されて縦がそのまんま。他のブラウザでは縦横比を考慮してくれるんですがね・・・なんか間違ってるのかな？

JavaScriptの一部

var canvas = imgobjs.canvas.getContext("2d");

imgobjs.img.onload = function() {
    imgobjs.canvas.width  = import.img.width;
    imgobjs.canvas.height = import.canvas.width * (imgobjs.img.height / imgobjs.img.width);
}

CSSの一部

.canvasimg {
    max-width: 290px;
}

Canvasの縦横

canvasの縦横は、canvas.widthとcanvas.style.widthと2種類の設定ができるようですね。styleの方は見た目の設定、canvas.widthは実際に描画されるサイズの設定（わかりづらいな）。うーん、例えば、こうした場合。

canvas.width = 300;
canvas.style.width = 500 + "px";

こうした場合、実際のサイズは300pxだけれど、実際表示されるサイズは500pxに拡大される。ということになる。excanvasなんかを使ってInternet Explorerで表示させてると、なんか更にややこしいことになるみたいだけど。

Canvasはちょっとややこしい。

結局どうしたのか？

画像を読み込んで表示させるのがこのCanvasの主目的なので、画像を読み込んだ瞬間に、親要素の幅を超えてたら画像の縦横比を修正する。という処理をJavaScript側で行いました。

一部抜粋

if (imgobjs.canvas.width > $(this).parent().width()) {
    imgobjs.canvas.width  = $(this).parent().width();
    imgobjs.canvas.height = $(this).parent().width() * (imgobjs.img.height / imgobjs.img.width);
}

CSS Media Queriesを使ってみた感想として

正直、この方法はケースバイケースで使うべきだと思いました。

いいところ

PC・スマートフォンで同じ内容を表示させる時、CSSだけを切り替えればいいので便利

テンプレートが最小限になって良い感じです。メンテナンスするファイルが減るのはいいことかと思います。

新しいデバイスにも対応できる

新しくなんか出たら、CSSを追加するだけでいけちゃいます。便利です。

静的なサイトでもいける

ユーザーエージェントでは、動的なサイトとかmod_rewrite使わないといけませんが、この方法であればCSSだけいじれば良いのです。いいですね。

なんかなぁ、とおもったところ

すべてのCSSを読み込む

Media Queriesでは全部のCSSを読み込んで処理するので、ユーザーエージェントで分ける手法とは読み込むCSSの数がどうしても増えてしまいます。

デバイスごとに表示させる情報が全く違うと役に立たない

PCとスマートフォンでは、訪問してくるお客さんの層が違う可能性があるため、PCではアレ、スマートフォンではソレと表示させるものが違ったり、今後そういう予定があったりすれば苦労しそうです。

おしまい

このサイトでは、この方法が良いようですので、続けてみます。ありがとうございました。

2012/06/17 16:23