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でも大丈夫のようです。