BlogをiPhone対応させてみました

iPhone持ってないので実機確認はしてないのですが、シミュレータ上で確認しながら、このBlogをiPhone対応させてみました。

させてみました、と言いつつも大したことはやってなくて

• サイドバーを非表示(コンテンツ表示幅が小さくなって読みづらいから)
• CSSをやや修正
• metaタグを追加

だけです。具体的には、まずlinkタグで読み込んでいる大元のCSSであるstyles-site.cssの最後に次の内容を追加。

@media screen and (max-device-width: 800px){ 
  #utilities { display:none }
  #content { min-width:800px; max-width:1280px }
  body.double div#main { width : 100%; border-right : none}
  li, dt, dd { font-size : 90%; } 
}

サイドバーの#utilityを非表示にして、コンテンツ部分の#contentの幅を最適化。あといろいろ折り返されていた箇所が多かったので、li, dt, dd要素のサイズを小さくしています。

その後にmetaタグに次の内容を追加。

<meta name = "viewport" content="width=728" />

これでこんな感じにすっきり収まっています。（シミュレータ上ですけど）

即席で作ったんですけど、何もやらないよりは表示はマシになりました。ただサイドバーをなくしてしまったので、ナビゲーションが悪くなっているのでここは専用のカスタマイズを行ってあげたほうがよさそうですね。