iPhoneとiPadでiframeの高さの指定ができない

iframeを使ってhtmlなどを表示させたい時に、iPhoneとiPadだとうまくいきません。

AndoroidやPCからはちゃんと見れてるのに、overflow hiddenや、scrolling=”auto”やhiddenがうまく読めないようで、スクロールせずに全部を表示してしまうという困った状態に。

それを改善するスプリクトがあるので、ご紹介したいと思います。




<style type="text/css">
.ifrm-container {
width:300px;
height:400px;
overflow:auto;
-webkit-overflow-scrolling:touch;
}
.ifrm {
width:100%;
height:100%;
border:none;
}
</style>

これを使えば大丈夫です。

私はheadに入れましたが、iframeの前に書くだけでも大丈夫かも?

それでiframeは、こういう風に書きます。

<div class="ifrm-container"><iframe class="ifrm" src="ここにURL" scrolling="auto"></iframe></div>

これでざわざわアップルのiOSに分岐したりせずとも、iPhoneやiPadでiframeを使って高さの指定をすることができます。

便利です。

コメントをする(スパム対策で認証制にしています)

*
*
* (公開されません)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください