人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はじめまして。モバイル用の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>


●質問者: rockafeller
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● snow0214
●500ポイント

これでどうでしょうか。
私の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>

rockafellerさんのコメント
早速のご回答ありがとうござます. $(function() { $("#testframe").width(document.body.clientWidth); $("#testframe").height(document.body.clientHeight); var preWidth = $("#testframe").width(); $("#testframe").attr("src","http://item.rakuten.co.jp/zenzaemon/ai05/"); $("#testframe").load(function(){ var afterWidth = $("#testframe").width(); alert(preWidth+","+afterWidth);} ); });</script> とするとpreWidthとafterWidthがPC上のChromeのiPhone5Sエミュレータ上では, 304,304と同じ値となるのですが, 実機iPhone5Sでは304と920と異なる値となってしまいます. 920を304にしたいのですがわかりませんでしょうか? 読み込み先のページにの問題なのでしょうか.. よろしくお願い致します.

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

rockafellerさんのコメント
すばやい回答ありがとうございました!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ