CSSのみでiPhone対応ページにする方法 | wadadanet

現在動いているシステムやテンプレートを触り、重要度の小さな「iPhone対応サイト」を作るなんてナンセンスです。 （私個人的には重要度MAXですけど、、、） それでもiPhone対応はしたいものです。 そこで！CSSのみでiPhone対応する方法をご紹介いたします。この方法ですと、システムによる不具合発生を最小限に抑える事ができるので、かなり有効な手段だと思います。

作業時間

私の場合、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！

デメリット

ナビゲーション

CSSのみですと、iPhone特有のナビゲーションはできません。 作成したい場合は、「iui」が便利かと思います。 link:Google「iPhone iui」 or 新しいウィンドウで開く（Google「iPhone iui」） ざっと見た感じだと、モジュールなどを触らないといけない感じがしたので、今回は全く使っておりません

レイアウトが・・・

私のサイトの場合、コンテンツ→ナビゲーションの順番で吐き出しているので、 その通りにしか表示できませんでした。 (CSSのpositionとか使ったらいけるのかな？）