ワイドiframeのWebページは、ビューポート付きのiPhoneではスクロールできません

css html iphone mobile-safari mobile-website
ワイドiframeのWebページは、ビューポート付きのiPhoneではスクロールできません

モバイルデバイス向けのWebページがあります(例: iPhoneとAndroid)。 このページには “(明らかにレンダリングする別のWebページが含まれています)があります。 iPhoneでは、ページ(およびiframe)が正常にレンダリングされます。 を設定しました

、ビューポートの幅を約320ish(または現在使用しているサファリ)に設定する必要があります。 ただし、iframeのコンテンツは320ishピクセル幅よりも広くなっています。

iframeが切り捨てられるため、これにより問題が発生します。 iPhone Webブラウザーは、iframeコンテンツの左側のみを表示します。 `width = device-width`があるので、残りのコンテンツを見るために左右にスクロール/パンできません。 また、「スクリーンスペースを広げる」ためにズームイン/ズームアウトすることもできません。

広いビューポートを設定することでこの問題を回避できます(例: `width = 800″ `)、iframeが表示されるようにします。 ただし、(a)ページの残りの部分が本来よりも幅が広いために悪化し、(b)常に800ピクセル以内に収まると確信できないので、すべてが修正されるかどうかはわかりません。

とにかく、iframeのコンテンツが常に表示されることを保証するためにあり、できれば、 width = device-width

FTR iPhone 3を使用しています。 この問題はAndroid(2.2)では発生しません。デフォルトのWebブラウザーはiframeのコンテンツをiframeから「流出」させ、左右にスクロールできます。

  2  0


ベストアンサー

HTML 5 Webアプリでも同じ問題が発生しています。

「overflow:auto;」を追加します-webkit-overflow-scrolling:touch; `iframeのコンテナーのスタイルに合わせてiOS 5でのスクロールが可能になりますが、iframeがスクロール可能な領域にコンテンツをレンダリングしていないため、これは100%問題を解決しないかもしれません。

編集:このソリューション(元のユーザーの功績)は、iframeの優れた代替手段です:https://stackoverflow.com/a/8529312/1101107

2


タイトルとURLをコピーしました