CSSの変更だけでPCサイトをiPhoneに対応させる方法

matsui — Tue, 15 Jul 2008 08:11:20 +0000

旬のiPhoneネタをご紹介します。

CSSを変更するだけで、既存のPCサイトを「iPhone」「iPod touch」に対応させる方法が、スライドで公開されています。
7/4にアップルストア銀座で行われたイベントで使われたスライド資料のようです。

おそらくこの資料のベースとなったスライドで、内容はやや異なっていますが、スライド内で紹介されているタグを抜き出して解説していますので、こちらのページの方がわかりやすいかもしれません。

iPhoneからのアクセスかどうかを判定するには、ユーザエージェントから判断するのではなく、linkタグのmedia属性でCSSを切り替えるのが良いようです。

他にも画面幅を調整する方法や、指タッチでも使いやすくするコツなどが紹介されています。

言葉での解説ありきの資料のため、ややわかりづらいところがありますが、iPhone対応サイトを作ろうと考えている方には役に立つと思います。

どこかに発表時の音声やムービーは公開されていないのでしょうか？
ご存じの方がいましたら教えてください。

関連：

第33回PHP勉強会で使用したスライド資料「モバイル版Googleマップのちょっと進んだ使い方」

matsui — Mon, 26 May 2008 08:13:41 +0000

先日の「第33回PHP勉強会」に参加させていただいたのですが、その際の発表で使用したスライド資料を公開いたします。

なお、資料内で紹介しているサンプルはこちらからご覧になれます。

それぞれプログラムもあるのですが、出張の移動中に書いたのでソースがあまりキレイではないのと、ライブラリとして使えるように、現在リファクタリング中です。
近日中に公開する予定ですので、もう少々お待ちください。

なお、勉強会参加者のtwkさんが、早速ウィザードの日本語訳のページを作ってしまったそうです。
→　こちらです
GoogleStaticMapsAPIに慣れていない方にはとても便利だと思います。
ぜひ合わせてご利用されると良いのではないでしょうか。

関連：