iPhoneでiframeの部分を表示すると、高さを設定していても伸びて全体が表示されてしまいます。

これを解決する方法としてjavascriptを使う方法など様々な方法がありますが、私が一番簡単だと思った方法の紹介です。

http://www.infoscoop.org/blogjp/2014/04/22/mobile-browser-iframe-scroll-problem/

こちらに記載の方法です。

CSSの部分

.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の部分

<div class=”ifrm-container”>
<iframe class=”ifrm” scrolling=”auto” src=”http://hoge.jp/”></iframe>
</div>

 

以上です。これでPCのFirefox・IE・Chrome、Android、iPhoneで問題無く、設定した高さでiframeが表示されるようになります。

 

スポンサー

お問い合わせ

この記事についてご質問があれば、お問い合わせ下さい。

お名前(必須)
お名前フリガナ(必須)
メールアドレス(必須)
メールアドレス確認(必須)
お問い合わせ記事URL
お問い合わせ内容(必須)