（私個人的には重要度MAXですけど、、、
）
それでもiPhone対応はしたいものです。
そこで！CSSのみでiPhone対応する方法をご紹介いたします。
この方法ですと、システムによる不具合発生を最小限に抑える事ができるので、かなり有効な手段だと思います。
実際の方法は「Read more」
作業時間
私の場合、tableで困ったりしたので2時間強でした。
iPhone設定
ページ内に下記のように追記してください。
オススメは、全てのCSS読み込み後がよろしいかと思います。
<link media="only screen and (max-device-width:480px)" href="/css/******.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no /">
これで、iPhoneだけ「/css/******.css」を読み込むようになり
iPhoneはズームなしになります。
CSSの作成
先ほど指定したCSS（******.css）を作成します。
CSSを作成するにあたって、注意する項目はこちら
- imgの幅を指定する
max-width:320px;
height:auto; - table吐き出しの物はinlineにする
th,td,tr { display:inline } - embedは非表示にする
embed { display:none; visibility:hidden; } - カラムはなるべく使わず一列に
float:none;
イメージ的には、現在PCで表示してるCSSをドンドン上書きするイメージです。
iPhoneシミュレーターで確認しながら作成するのもいいですが、
実際のiPhoneとは表示が違う場合があるので、そこらへんを考慮して作成するといいと思います。
無線LAN＋自宅サーバがある場合は、iPhoneでのローカルページも表示可能なので作業効率UP！
参考
参考になるか分かりませんが、当サイトのiPhone用CSSです。
link:iPhone.css or 新しいウィンドウで開く(iPhone.css)
デメリット
ナビゲーション
CSSのみですと、iPhone特有のナビゲーションはできません。
作成したい場合は、「iui」が便利かと思います。
link:Google「iPhone iui」 or 新しいウィンドウで開く（Google「iPhone iui」）
ざっと見た感じだと、モジュールなどを触らないといけない感じがしたので、今回は全く使っておりません
レイアウトが・・・
私のサイトの場合、コンテンツ→ナビゲーションの順番で吐き出しているので、
その通りにしか表示できませんでした。
(CSSのpositionとか使ったらいけるのかな？）
