iframeがiPhoneスマホではみ出す件の修正方法｜divで囲んでサイズ調整するだけ

iframeを入れたwebサイトをiphoneで見たら、
iframeの中身がはみ出して、ページを独占していました。

iPhoneとiPadではiframeのサイズ調整が普通にサイズ指定しても効かないみたいです。
Androidもどうもよろしくない様子。

修正方法は次の通りです。

１、スマホ用のスタイルシートを出し分ける

スマホやipadで利用するスタイルシート(cssファイル)を、
本体のCSSとは別に準備します。

今回はjavascriptを使ってユーザーエージェント（UA）を使って出し分けます。

<script>
	(function(){
		var _UA = navigator.userAgent;
 		if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1) {
 			document.write('');
 		}else if(_UA.indexOf('Android') > -1){
	 		document.write('');
		}else{
			document.write('');
		}
	})();
</script>

出し分け方法は他にもcssのメディアクエリー（Media Queries）を使って出し分けたり、PHPで出し分ける方法があります。
参考：iPhone用にCSS/PHP/JavascriptでCSSを切り替える基本的な方法

２、iframeをdivで囲む

HTMLのiframeをdivで囲んでidやclass名をつけます。

<div id="box"> 
	<iframe src="rss" frameborder="0" width="300" height="200" scrolling="auto"></iframe>
</div>

タグの意味付け（マークアップ）と関係ないタグは増やしたくないけど、
やむをえない。。

３、PC用のサイズ調整をする

#box {
	width: 300px;
	height: 200px;
}
#box iframe {
	width: 300px;
	height: 200px;
}

４、スマホ版を少し改良する

スマホ用のスタイルシートで、
サイズ調整と
囲んだdivに「overflow: auto;」を付けます。

#box {
	overflow: auto;
	width: 300px;
	height: 200px;
}
#box iframe {
	width: 295px; /*PC版の幅－5pxくらい*/
	height: 200px;
}

これでスマホのiframe問題を解決することができました。

でも、表示はできても、
Androidではスクロールできないし、
iOSでは2本指でスクロールするというわかりづらい仕様になっているようです。

結局のところ、スマートフォンでiframeは使わないほうがいいようです。