iframeがスマホで見た時に枠を超えて飛び出しちゃってる時の対処法

更新日：2016年7月13日

インラインフレーム要素（iframe）は現在のページに別のURLのページ内容を埋め込むことが出来る便利なものです。HTML4.01で非推奨とされていましたが、HTML5では非推奨が解除され、使っていいものとなりました。これ知らない方結構いるのではないでしょうか。

では本題ですが、iframeは簡単で便利で使いやすいのですが、スマホにはいまいち対応していないタグだという点が注意です。

例えば縦に長い別のURLのページ内容を読み込んだ場合、iframeではスクロールバーが出現して枠内に収めてくれますよね。
でもこれスマホで見るとスクロールバーがなくって、別のURLのページ内容が飛び出しちゃってるんです。

それではその対処法のご紹介ですが、下記のようにHTMLは記述。
iframeをdivで囲っちゃいましょう。iframeにclassを当てるのもお忘れなく。

CSSは以下のように記述します。

.frame_wrap {
	width: 450px;
	height: 150px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.frame {
	width: 100%;
	height: 100%;
}

.frame_wrapのwidthとheightは任意です。
これでスマホで見た場合でもiframeが枠から飛び出さなくなりました。

HTML5で非推奨が解除されたはずなのになんで対応してないの…って個人的には思いますが…、
対処法のご紹介でした。