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

2014/02/19

by sayo

Tag : , ,

iflameスマホ閲覧時はみ出す

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

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

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

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

スマホや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を切り替える基本的な方法

2、iframeをdivで囲む

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

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

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

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

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

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

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

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

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

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

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

参考:スマートフォンでiframeが伸びる件の対策

関連するコンテンツ

コメント

コメントを残す

気になる単語をサイト内検索できます

この記事と同じカテゴリ: css iphone javascript・jquery

>> 記事一覧を見る(TOPページ)