【開発】スマホ用ウェブページの作成のはじめ
ウェブクライアントというと、もうPCベースの考え方では古過ぎのようで、気づいたら実際自分も就寝時のウェブは、Android端末でウェブしてます。
自分が管理してるサイトの幾つかはまだ未対応で、いつかやんなきゃ・・とか思いつつまったく手付かずです(；´Д｀)
幸い、世のスマホは高機能すぎるので、表示自体はしてくれるが、解像度や動作速度の問題から閲覧には問題がアリアリです。
んで、実際に始めてみると、結構簡単です。
ググッてみても、そんなにヒットしないのもその性でしょうか。ブログなどのCMSを利用してたら、プラグインインストールするだけだし、実際製作の需要って無いのかもしれないけど。
携帯電話（ガラケー）のような機能制限などはほぼ皆無、HEAD部分に、以下のマジナイを書くだけで基本的にOK。あとは、（リキッド対応に向けて）CSSでグリグリ書けばほぼ終了でしょう。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
これは、デバイスの解像度に対して、どのように表示するかを指定するものですが、基本的には変更する事はないかと思います。
これで、縦方向のみにスクロールするシンブルでまさにスマホ向けサイトのように見えます（但し、デバイス横サイズを超える記述すると、要スクロールとなります。後述）
ユーザーがズーム変更できるようにするには、user-scalableを変更する訳ですが、これを可能にすると、position:fixedなどの浮きブロック要素などに不具合があるのを確認してます。
手持ちに、AndroidのXperia Arcしか無くて、確実な事を言うことはできないんですけどね（それと、公式のエミュレータ（DVM）での動作確認）
ここで注意するのが、デバイスの解像度です。
いくら高解像度の液晶を搭載していても、ウェブで認識するのは全然違うもので、横サイズは、古いものは240pxや320pxなどが帰ってきます。
ちなみに、Xperia Arcは240pxでした。古いiPhoneは320pxのようです。
最近の端末はどうなんでしょう。わかんない。ただ、iPhoneに習って、320pxでデザインするのが良いようですね。
つまりは、ユーザーに余計なスクロールをさせたくない場合は、固定サイズ要素は、このサイズ以下で抑えておく必要があります。
ちなみに、回転される事も考えないといけません。
あと重要なのが、リキッド化（サイズ自由）の記述です。
ちなみに写真は、リキッド・スネークのおっさんですね。記事とは無関係
回転されるので、サイズに対して臨機応変に対応しておかないといけません。
簡単にいえば、CSSでWidth:100%;と書くだけのお仕事になります。
これに限らず、サイズが変更されても大丈夫なように書くだけです。
現在、普及しているスマホのほとんどが、iPhoneかAndroidのどちらかですので、とっても製作者サイドが楽なんです。
いずれもWebKidベースなので、PCにあるようなブラウザ互換を意識しなくても良いんです。
WindowsPhoneがどんだけシェアを伸ばすか次第なんですけどね。
WebkidやCSS3には、便利な機能があるので、グラデーションをしたいがための画像を用意とか、角丸のための画像とか、一切不要です。CSSだけで書けちゃいます。
border-radius: 8px;
角丸はこれだけ（４点それぞれに指定できます）
background: -webkit-gradient(linear, left top, left bottom, from(#ffeeee), to(#995544));
グラデーションもこんな感じです。細かく書けます。
でも、いまこんなWebkidベースの機能を使っちゃうと、後々面倒になってしまうかもしれませんので、リスクも抑えつつ利用すべきです。