2012-04-11 26 views
2

携帯電話とタブレット向けのページを提供しています。私はOpenXを使ってそこに広告を出しています。広告は、ページの幅であるべきiframeにロードする必要があります。私はブートストラップを使用しています。iframeの幅を携帯電話とタブレットのブートストラップで100%に設定する

私はこのコードで物事をテストした:

<iframe src='http://www.cnn.com' width=100% height=120px scrolling='no'></iframe> 

これは、ブラウザのウィンドウとまったく同じ幅だインラインフレームを作ります。問題は、iphoneでこれを開くと、iFrameを読み込んだウィンドウのサイズに合わせてiFrameのサイズを変更することになり、それは非常に望ましくない動作だということです。それは私のデスクトップでは、iphoneでのみそれをしません。私は他のスマートフォンではまだテストしていません。

は基本的に私が探している画面(100%)と同じ幅であると私は私はあなたがかなり確信している、それ

答えて

3

に大きなページをロードする際に再スケールしないのiframeですこれを制御するビューポートメタタグを探しています。ここではそれを完全に説明します参照です:https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

は、基本的には、あなたの頭の中にこのコードをドロップしたい: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

+1

はええ、私はそれを試してみましたが、それはまだ、画面の幅を越えてのiframeのサイズを変更。それはバグのようなものです – patrick

+0

私は1つの回避策を見つけました:今は、オーバーフロー:非表示に設定されたdivでiframeを読み込みますが、それは非常にきれいな解決策ではありません... – patrick

+1

'overflow'トリックは、 iframeをスクロールする必要はありません。 'iframe'の内側にある左右のスワイプイベントは' iframe'のウィンドウオブジェクトによって捕捉されるので、決して 'div'ラッパーには渡されません。したがって、スクロールは行われません。 –

関連する問題