iphoneでiframeをスクロールさせる

iframeで別ファイルを読み込ませ、iframeのheightで高さを指定して、
スクロールバーが出るようにしていたのに、iPhoneではスクロールバーが出ず、
ファイルの中身が全部表示されてしまうことが分かった。

で対策を色々調べた結果、どうもiframe自体がiPhoneではまともに使えないらしい。
かといってレスポンシブにするとか、スマホ用のCSSを作るほどのものではないので
html側のiframeをdivで囲み、そのdivに対してiframe用のハックをかませることにした。

iframe用のハックは
CSSハック一覧　モダンブラウザ編
の

@media screen and (max-device-width: 480px) {
#ID名1{margin:0px;}
#ID名2{margin:0px;}
}

を参考に、
また、iPhoneでスクロールできるようにするために

-webkit-overflow-scrolling: touch;
を追加。

でhtml側は

<div id="scroll">
<iframe name="iframe" src="text.html" width="100%" height="100%" scrolling="yes" align="top" frameborder="0" onload="iFrameHeight()">
</iframe>
</div>


CSS側は

@media screen and (max-device-width: 480px) {
#ID名 div{height:300px;
overflow:auto;
-webkit-overflow-scrolling: touch;}
}

overflow:autoはoverflow:scrollでも大丈夫のようです。