iPadだとiframeが伸びるのに対応した

今までうちの会社で制作してきたwebサイト（直接自分が関わった物も含む）では、
多くの場合、新着情報やイベント情報などを、別ファイルで管理し、iframeでindex.htmlに表示させてきた。
エンジニアさんのシステムとの兼ね合いもあり、その方が制作、管理、運営が楽だったからだ。

●問題点
しかし、iPadの登場で問題が発生してしまった。
iPadではiframeにスクロールバーが表示されずに、読み込んだhtmlの内容に応じて伸びていってしまう。
テーブルレイアウトなら、後続の要素が下がっていってしまうし、
overflow:hiddenが設定されたボックス要素内だと、はみ出た領域は表示されないし、スクロールもできない。

●解決法
http://www.luigibox.com/00_lab/iframeForiPadSafari/

divでiframeを囲む。
javascriptでiPadだけにcssを対応させる。
そのcssを使って
divにはoverflow:autoを設定し、
iframeの幅を、divより50px程狭くする。
iframeは左に寄せる。
iPad上では、divの右の50px分の余白で、2本指でスクロールできるようになる。
ぱっと見、スクロール出来る事が分かりづらいので、
必要であれば、divの背景に画像を設定し、ユーザを誘導する。

●その他
iPad用のcssファイルは3つあり、
それぞれ、iPadでは常に適用されるcss、縦にした時のみに適用されるcss、横にした時のみに適用されるらしい。
iPadを傾けたりしただけで、背景色が変わったりしておもしろい。
背景画像を変えて、キャラクターがiPadの傾きにリアクションしてるように見せたり、
横向きにした時だけ文字のサイズをやや大きくするなど、場合によっては効果的に使えるかもしれない。

今日から

長らく、blogの方を放置してしまった。
なんで放置してたかというと、何に使えばいいのか分からなかったから。
今日からは、仕事中に失敗したことや、覚書、htmlやらjavaやらのやり方を書くことにしよう。
同じミスでつまづく事もなくなるはずだ。