iPhoneサイト構築への道!! その1 ちょっとだけ見やすくなりました。

年末年始のiPhoneな話題をかっさらった「TV&バッテリー」のおかげで、やりたかったことが全くできてきない今日このごろ…。
　
先月購入した、iPhone対応サイト制作ガイド本「iPhoneサイト制作ハンドブック iPhone&iPod touch対応」も、なかなか読めていませんが、少しずつ勉強中。
　
iPhone対応サイトの制作について、基礎的なところから、とても詳しく書かれており、HTMLをちょっとかじっただけ（ほんとにちょっと…）の私でも、なんとか読み進められています。
　
少しずつですが、この本を読んだ成果をブログ上でも発表していこうかなぁ、ということで、「iPhoneサイト構築への道!!」シリーズ、スタートです!!（１回で終わったらゴメン…）

　
　

「iPhoneサイト制作ハンドブック」では、iPhone対応サイトを「iPhone互換サイト」と「iPhone専用サイト」に分けています。
　
通常のPCサイトでも、大半のコンテンツが問題なくiPhoneで見ることができるれば「iPhone互換サイト」。iPhoneで見ることを前提に設計されたサイトは「iPhone専用サイト」としています。（FLASHなどが多用されていればiPhoneで見られないので「iPhone非対応サイト」）
　
このブログもとりあえず「iPhone互換サイト」なわけですが（多少デザインがおかしくなりますが…）、これをちょっとだけ見やすくしました。
実は、年末から実行済みだったんですが、気付いた人はいらっしゃるでしょうか？
　

iPhoneで「iPhone FAN (^_^)v」を開いたところ。左が従来、右が改良後です。
右の方が、内容が大きく表示されています。
　
iPhoneのSafariは、何も指定していないとサイトの幅を980ピクセルで表示するようになっているそうで、このブログはそれより幅が狭いので、左右に隙間ができていたというわけ。
　
これを改善するには…

<meta name=”viewport” content=”width=810″ />

という１行をヘッダに追加するだけ。（810が表示させたい幅）　簡単でしょ。
　
ちょっとしたことですが、パッと見たときの印象は結構違うかも。
サイトをお持ちの方は、ぜひお試しを。
　
　
「iPhoneサイト制作ハンドブック」を探す⇒Amazon 楽天 Yahoo!ショッピング
　iPhone関連本カタログはこちらです。
　