iphoneでiframeが表示できるようにする 


iphoneでiframeが表示できるようにする

【CSS】iphoneでiframeが表示できるようにする

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

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

CSSの部分

パターン①

※<head>の下に記述してください

<head>
<!–iphone用のiframe表示CSS開始 –>
<style type=”text/css”>
<!–
.ifrm-container{
width:〇〇〇px; ※下のwidthと数字を合わせる
height:△△△px; ※下のheight:と数字を合わせる
overflow:auto;
-webkit-overflow-scrolling:touch;
}
–>
</style>
<!–iphone用のiframe表示CSS終了 –>

divの部分

パターン①
<!–iphone用のiframe表示div開始 –>
<div class=”ifrm-container”>
<iframe width=”〇〇〇” height=”△△△” frameborder=”0″ scrolling=”auto”  src=”ここにリンクさせるhtmlを入力”></iframe>
</div>
<!–iphone用のiframe表示div終了 –>

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