「小鳥ピヨピヨ」をiPhone対応させました。
URLは変わらず「http://coolsummer.typepad.com/kotori/」です。iPhoneでアクセスすると、こんな感じに見えます。
やり方は簡単。以下のmetaタグをの前に加えるだけです。
書き方：
<meta name="viewport" content="width=【ブログの横幅】, initial-scale=【拡大率。widthで指定した横幅をある程度拡大して、僕の場合は本文領域のみを表示】, " />例：
<meta name="viewport" content="width=850, initial-scale=0.611, " />
※ 「850」が小鳥ピヨピヨの横幅。
※ 「0.611」は「850×0.611=520」で、だいたい小鳥ピヨピヨの本文表示領域と同じ横幅に。
と、いうわけで、単に拡大してサイドバーを表示域の外に出してるだけという、なんちゃって対応です。
本当は弾さんのところみたく、iPhone専用にcssを書いたり、あるいはiPhone専用にhtmlを改造したりするのが良いのでしょうが、面倒なので……
上記を知るにあたり、以下のサイトを参考にさせていただきました。ありがとうございました！
- ブログをiPhone閲覧用に最適化してますか？ ： webdog
- iPhone対応サイトの作り方 ： iPhone 3G Wiki
- iPhone / iPod touch 向けのmeta要素 viewport ： ProjectDD Blog
- Apple Developer Connection - Web Apps Dev Center - Designing Content
……え？
おなじみの小鳥マークが見えなくて寂しい？
大丈夫です。これは拡大しているだけなので、右に画面をスライドさせればほら、
ちゃんと小鳥が現れます。ホッとしましたねー（僕も）。
（ちょっとしたトリビア。このちょっと切なくて可愛い小鳥は100%ORANGEさんに書いてもらったものです。大感謝！）。
100%ORANGE AtoZ (Pooka+)
Pooka編集部 (編さん)
まるさんかくぞう
及川 賢治 (著), 竹内 繭子 (著)
