ブログをiPhoneに対応させた

　ダンコーガイ氏の方法も試してみたんだけど、うまくいかなかった。あと @media screen な方法にはバグがあるらしいので、UserAgentで振り分けてiPhoneにだけ専用CSSを適用させることにした。P_BLOGにはUAごとに適用するCSSを切り替える機能が付いているのでとっても簡単。

　ダンコーガイメソッドはメニューバーなどをCSSで display: none; にして見えなくするやり方なわけだけれど、それをそのまま真似したらメニューバーの部分が空白になるだけで、コンテンツ部分にフォーカスされなかった。そういうわけなので、#contentの親要素である#wrapperにもCSSで min-width を指定してやり、さらにその後#contentに min-width を指定してやった。で、↑にご覧の通り、iPhoneに最適化されて表示されるようになった。

　やり方なんだけど、まず /include/http_headers.inc.php の172行目付近、KHTMLブラウザ（SafariやWebKitなど）のマッチングの直前に、以下のように記述。（iPhoneに乗ってるSafariもKHTMLブラウザなので、これよりも後に書いたら意図した通りにCSSを適用させることが出来ない）

} elseif (preg_match('/iPhone/', $_SERVER['HTTP_USER_AGENT'])) {
    $form_length = '18';
    $text_cols   = '55';
    if (file_exists($cd . '/styles/' . $style_num . '/<var>iphone_style.css</var>')) {
         $style = 'iphone_style';
    } else {
         $style = 'default';
    }
}

　そして iphone_style.css という名前のCSSファイルを用意してやれば、めでたくiPhone用CSSがiPhoneに適用される。

　それで iphone_style.css の中身なんだけど、僕は以下のように書いた。

@charset "utf-8";
@import url(../gti/default.css);

#wrapper {
    min-width: 640px;
}
#content{
    min-width:640px;
    max-width:1000px;
}
#menu-box {
    display: none;
}

　あとはXHTMLのヘッダーに

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

と書き加えてやればOK。ちなみに640pxというのは僕のブログに特有なのでこの数字は各自自分のブログの表示に最適な数字に置き換える必要があります。iPhoneでも随分見やすくなりました。