| @技術/プログラミング
 ダンコーガイ氏の方法も試してみたんだけど、うまくいかなかった。あと @media screen な方法にはバグがあるらしいので、UserAgentで振り分けてiPhoneにだけ専用CSSを適用...

 ダンコーガイ氏の方法も試してみたんだけど、うまくいかなかった。あと @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でも随分見やすくなりました。

この記事に似ている記事

  • Dsc 2659
     「パソコン用のウェブサイトをそのまま見られるのがiPhoneの売りなのに、それをわざわざiPhone用に最適化するなんて意味不明じゃね?」なんて思う人もいるかも知れない。確かにそうなんだけど、iPhoneのすごいところは、普通にCSSとJa...
  • Screenshot
    &lt;/param&gt; &lt;/param&gt; &lt;/param&gt; &lt;/param&gt;&lt;/embed&gt; ここ数日Twitter調子悪いですね。過去ログがたどれないのは不便極まりない。 そんななか気...
  • Screenshot
    クリックした後にしばらく経ってから続きの部分が表示されるだけだとつまらないから、クリックしてから続きが読み込まれるまでの間にローディングgifが表示されるようにしてみた。参考にさせてもらったのはhysyskさんのブログ。ローディングgifはこ...
  • qTipにした May 14, 2009
    1034 qtip
    Tribe Called Questの人のことじゃないよ(古)ToolTip系のPlug-inはブログを作ったばかりの結構最初の頃から長いことArekorePopupを使ってました。透過やtext-shadowが美しいのでいまでも好きなんです...
  • Screenshot
     大変便利な Future is Now さん提供のP_BLOG用アクセス解析プラグイン、plg_page_analyzeなんですが、いくつか不満な点があったのでちょっと改造しました。 まず、サイト内リファラを拾ってしまう点。リファラ画面が自...
  • 1025 iphone optimized
    やっとiPhoneに最適化されたサイトが出来ました。ユーザーエージェントを見て、iPhone/iPodであれば専用のサイトを表示します。URIはパソコンと同じです。これまでも一応iPhone対応というか、iPhone用のXHTMLとCSSは用...

Comments


(Option)

(Option)