web-dev-qa-db-ja.com

iOS上のCSSでのiframeサイズ

Iframeがあり、これは基本的にフレームに収まるよりも多くのコンテンツを持っています。フレームのサイズはブラウザーの画面サイズに基づいており、オーバーフロースクロールを可能にします。これは、iOSを除くすべてのブラウザーで完全に機能します。 iOSでは、safariはコンテンツに合わせてフレームのサイズを変更することにしました。あなたが期待するものではありません。

JsFiddleのコード例：
http://jsfiddle.net/R3PKB/2/

IOSデバイスで試してみてください。
http://jsfiddle.net/R3PKB/2/embedded/result

HTML：

<div class="frame_holder">
  <iframe class="my_frame">
    // The content
  </iframe>
</div>

CSS：

body {
  position: relative;
  background: #f0f0f0;
}

.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
}

.my_frame {
  width: 100%;
  height: 100%;
  border: 1px solid #e0e0e0;
}
ioscssmobileiframeresize
45
Guido Bouman

overflow: auto;と-webkit-overflow-scrolling:touch;でラッピングdivを追加することで、機能させることができます。以下に例を示します。 http://jsfiddle.net/R3PKB/7/

SOこれはiOS 4以降のバグです。]に関する以前の質問によると、ここで詳細情報を見つけました。 https://stackoverflow.com/a/6721310/1047398 - iOS（iPad）コンテンツのトリミングの問題のiframe

50
nvreez

これは古い質問ですが、Googleで最初に出てきて、この問題は最近iosデバイスに存在するため、このページで見つけたより良い修正を再投稿します： iOS SafariでIFrameを応答させる方法は？

基本的に、スクロール付きのiframeがある場合（では、Twitterウィジェットとしましょう）、上記のソリューションは、親をスクロール可能にするため、うまく機能しません。私のために働いた修正は、height: 100% with height: 1px; min-height: 100%;。

10
Andrei Cojea

IOS Safariが予想とは異なるOriginのiframeコンテンツを表示している場合（つまり、数ピクセル分シフトされている場合）、scrolling="no" iframeの属性として。これにより、コンテンツが自動的に調整されなくなります。

もっと こちら

7
Kyle Dumovic

height: 1px; min-height: 100%;を使用しても機能しませんでしたが、スクロール要素は必要ありませんでした。代わりに周囲のdivでoverflow:auto;を使用する必要がありました。この方法は意図しない結果になる可能性があるため推奨されていませんが、Android/iOSおよびデスクトップブラウザーでテストしましたが、まだ問題を見つけることができませんでした。 指が交差しました。

これは、いくつかのiOS iframeニュアンスに関するAndy Shoraの素敵な投稿です。 http://andyshora.com/iframes-responsive-web-apps-tips.html

1
Chrispy