割引クーポン&セール情報 毎日更新中
GearBest Banggood GeekBuying TOMTOP Cafago
欲しい機種が決まっている人は5社分まとめてクーポン検索
5社最安クーポン価格比較

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を使って高さの指定をすることができます。

便利です。

割引クーポン&セール情報 毎日更新中
GearBest Banggood GeekBuying TOMTOP Cafago
欲しい機種が決まっている人は5社分まとめてクーポン検索
5社最安クーポン価格比較

コメントを残す

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