はじめまして。モバイル用のhtmlページを作成しているのですが、viewportの指定をしたページからiframeで例えば(http://item.rakuten.co.jp/zenzaemon/ai05/)を実機(iPhone5S Safari)で表示しようとするとiframe内のページが拡大されてしまいます。

※ PC Chromeブラウザでは問題なく表示されます

ご存知の方がいましたら、拡大されないようにするにはどのようにすれば良いかご教授よろしくお願い致します。
または参考になりそうなページがありましたらご連絡いただけるとありがたいです。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function() {
$("#testframe").width(window.innerWidth);
$("#testframe").height(window.innerHeight);
$("#testframe").attr("src","http://item.rakuten.co.jp/zenzaemon/ai05/");
});
</script>
</head>
<body>
<iframe id="testframe" src="">ここiframe</iframe>
</body>
</html>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/06/14 22:33:57
  • 終了:2014/06/21 22:35:04

回答(1件)

id:snow0214 No.1

snow0214回答回数470ベストアンサー獲得回数1162014/06/15 00:08:53

ポイント500pt

これでどうでしょうか。
私のiPhone 5Sでは正常に表示されます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content=width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function() {
$("#testframe").width(document.body.clientWidth);
$("#testframe").height(document.body.clientHeight);
$("#testframe").attr("src","http://item.rakuten.co.jp/zenzaemon/ai05/");
});
</script>
</head>
<body>
<iframe id="testframe" src="">ここiframe</iframe>
</body>
</html>
他1件のコメントを見る
id:snow0214

ChromeはiPhone 5SのViewportのwidthを920pxで認識しているようなので、スクロールバーを除いた分をwidthとして返してしまうのだと思います。

2014/06/15 18:09:18
id:rockafeller

すばやい回答ありがとうございました!

2014/06/21 13:54:58

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません