iPhoneでiframeの部分を表示すると、高さを設定していても伸びて全体が表示されてしまいます。
これを解決する方法としてjavascriptを使う方法など様々な方法がありますが、私が一番簡単だと思った方法の紹介です。
http://www.infoscoop.org/blogjp/2014/04/22/mobile-browser-iframe-scroll-problem/
こちらに記載の方法です。
CSSの部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.ifrm-container { ? width:300px; ? height:250px; ? overflow:auto; ? -webkit-overflow-scrolling:touch; ? display: inline-block; } .ifrm { ? width:100%; ? height:100%; ? border:none; ? display:block; } |
HTMLの部分
|
1 2 3 |
<div class="ifrm-container"> <iframe class="ifrm" scrolling="auto" src="http://hoge.jp/"></iframe> </div> |
以上です。これでPCのFirefox・IE・Chrome、Android、iPhoneで問題無く、設定した高さでiframeが表示されるようになります。
