お手軽スマートフォン対応

少し前はウェブサイトの「モバイル（フィーチャーフォン）対応」がよく謳われましたが、ここ1、2年はなんといっても「スマートフォン（スマホ）対応」です。
a-blog cmsは、ユーザーエージェントを見てテンプレートを変えられるので、本来ならば、スマホに最適な形で構成したテンプレートを用意するべきなのですが、あえてワンソースマルチユースにしてみました。
今となっては定番の作業ですが、まとめてみます。

meta name="viewport"

具体的な用例は、Safari Developer Libraryが詳しいです。
W3Cのサイトにも、“Mobile Web Application Best Practices”という記事がありました。「スマホみたいな小さいデバイスでウェブアプリを表示したときに、意図しないサイズで表示されないよう、スケールを設定してやる」というようなことが書いてあります。
Safari Developer Libraryを参考にすると、ベターな記述としては、

<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

になるでしょうか。幅はデバイスに合わせて（width=device-width）、拡大縮小なしで（initial-scale=1.0, maximum-scale=1.0）、ユーザーが自由にスケール変更できないように（user-scalable=no）、という設定です。
maximum-scale=1.0を設定しておかないと、縦長（portrait）で表示させたものを横長（landscape）に回転したときに、表示がズームされてしまい、意図しない表示になります。

maxmum-scale=1.0を指定せずにportrate→landscapeにした時の表示

最初portraitで表示したあと、画面をlandscapeにしたときに、device-widthの設定はそのまま（320px）で480pxにあわせるため、ズームされて表示される…というような意味になりますでしょうか。実際、上記の画像を見ると、画面が1.5倍（480÷320=1.5）に拡大されています。（横で表示してから縦に戻すのは問題なさそう……？）
というわけで、maximum-scaleを1にしておけば、それが防げるわけです。

Media Queries

メディアクエリを設定して、デバイスに合わせたCSSを適用します。
（すばらしい参考ページ：[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例｜コリス）
本来なら、CSSファイルの読み込みをコントロールするのがベターな方法だと思うんですが、諸般の事情により、CSSファイルを全部読み込んでしまって、その中で振り分けをしています。
スマホについては、最大幅480px以下で適用されるよう、

@media screen and (max-width: 480px) {
/*スマホ用スタイル…*/
}

という風にしてあります。
もう一点、landscapeにしたときに、幅の変化に伴ってフォントサイズが自動で変わってしまう場合があります。
それを止めるために、次の一文を、htmlかbodyに適用します。

-webkit-text-size-adjust: none;

まとめ

処理はクライアント側丸投げの「お手軽スマホ対応」、不十分ながら、ひとまずの完成です。
もうちょっとがんばる余裕があるなら、device-pixel-ratio（これも考え出すとややこしい…）や端末の判定など、やるべきことはたくさんあります。

取っ付きとしては、サーバ側には特になにも用意することないというのが、コーダーやデザイナーにうれしいですね。
しかし、Androidみたいにフィーチャーフォン並みに様々なハードウェアがあると、「完璧」な同一性の担保は難しそうです。

一方で、「pxt | 考察：Appleはスマホサイトを作らない。」というような鋭い指摘もあります。
突き詰めれば、欲しい情報がストレスなく見られればいいわけですので、jQuery Mobileなどのフレームワークが追い求めている「いわゆるiPhoneっぽい見映えのサイト」が必ずしもベストな選択とは限らない、ということは、心に留めておきたいと思います。