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

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

 
 


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

IMG_0246.jpg IMG_0248.jpg

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

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

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

 


【PR】お急ぎ便使い放題のAmazonプライム無料体験!!

 




3 件のコメント

  • わくわくさん
    なんで、こんな機能をわざわざ隠したんでしょうね。しかも、結局、みずから公開しちゃうなて、本末転倒..。
     
    りあるまっこいさん
    あくまで、「iPhone互換サイト」として、運用しているので、その点はご勘弁を。
     

  • コメントを残す

    メールアドレスが公開されることはありません。