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>
.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を使って高さの指定をすることができます。
便利です。
コメントをする（スパム対策で認証制にしています）