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


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

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

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

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

CSSの部分

パターン①

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

<head><style type=“text/css”>
.ifrmcontainer { width:300px; height:250px; overflow:auto; webkitoverflowscrolling:touch; }
.ifrm { width:100%; height:100%; border:none; }
</style>

パターン②

<head>
<meta http-equiv=“content-type” content=“text/html; charset=UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no”>
<style type=“text/css”>
.ifrmcontainer { width:300px; height:250px;
overflow
:auto; webkitoverflowscrolling:touch; display: inlineblock; margin: 10px; }
.ifrm { width:100%; height:100%; border:none; display:block; } 
</style>

</head>

divの部分

パターン①
<div class=“ifrm-container”>
<iframe class=“ifrm” scrolling=“auto” src=“〇〇ここにリンク先を挿入〇〇〇”></iframe>
</div>

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


スポンサーリンク
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサーリンク