0

これが私が直面している問題を示すフィドル（jsfiddle.net/salman/RQBra/show/）です。iframeは、すべてのブラウザー（Safari 5 for Windowsを含む）で期待どおりに表示されます。しかし、2つのiOSデバイス（iPadとiPhone）でページを表示すると、iframeのコンテンツがオーバーフローし、iframeの右側の領域全体をカバーしました。同様のiframeを使用するページのスクリーンショットは次のとおりです。

iOSのx方向にiframeがオーバーフローする

この問題を回避するにはどうすればよいですか？

4

4 に答える 4

1

divで修正できますが、iPhoneではjavascriptがないとスクロールできません。iframeのサイズを修正する方法を示すフィドルを作成しました。

http://jsfiddle.net/RQBra/29/

基本的に、iframeをラッパーでラップし、それにいくつかのcssを与えます。

#wrapper {
position:relative;
z-index:1;
width:400px;
height:400px;
overflow:scroll;
}

。

于 2012-05-10T07:25:43.177 に答える
1

<iframe>特定の場合の回避策は、を<embed>要素に置き換えること です。

<embed src="..." type="text/html" width="400" height="400"></embed>

Safari Mobileに望ましい効果をもたらし、コンテンツを自動サイズ変更する代わりに、指定さwidthれたサイズにクリップします。ただし、埋め込みはHTMLコンテンツ用に特別に設計されたものではなく、スクロールやさまざまな環境（必ずしもネイティブにレンダリングされるとは限りません）heightを処理するときに望ましくない影響が生じる可能性があるため、本番環境で使用する前にケースをテストしてください。contentWindow

W3C：

この要素は、外部（通常は非HTML）アプリケーションまたはインタラクティブコンテンツの統合ポイントを表します。

于 2014-02-12T23:56:18.083 に答える
0

うーん、iframeをdivでラップしてみてください。ただし、iframeの幅と高さを単独で制限することはできません。

于 2012-05-10T06:56:37.227 に答える
0

Iframe内にHTMLファイルがあると推測しているので、HTMLではコンテンツをラッパーdivでラップします

#wrapper {
position: relative;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

サイズはhtml本体に相対的であり、viewportSizesは、2番目の行がIframeクリックでのちらつきを処理していることを望む場合よりも、iOSで発生します...

于 2014-02-06T10:00:38.270 に答える