CSS を使用して iOS デバイスの Iframe サイズの問題を解決する方法?

CSS を使用した iOS での iframe サイズの問題の修正

iOS デバイスで iframe を表示するとき、特に iframe コンテンツがそのサイズを超える場合、一貫性のない動作が発生する可能性があります。割り当てられたフレームスペース。他のブラウザではオーバーフロー スクロールが可能ですが、iOS の Safari では、余分なコンテンツに合わせてフレームのサイズが予期せず変更されます。この望ましい動作からの逸脱は、CSS を変更することで対処できます。

解決策:

この問題を解決し、デバイス間で一貫した iframe 動作を確保するには、次の CSS コードを使用できます。追加:

<code class="css">.frame_holder {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}</code>

変更された HTML と CSS は次のとおりです:

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

<code class="css">body {
  position: relative;
  background: #f0f0f0;
}

.frame_holder {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
  background: #ffffff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.my_frame {
  width: 100%;
  height: 100%;
  border: 1px solid #e0e0e0;
}</code>

説明:

追加された CSS スタイルは 2 つを導入します重要なプロパティ:

• オーバーフロー: 自動;必要に応じてスクロールバーを追加することで、親コンテナがオーバーフローしたコンテンツに対応できるようにします。
• -webkit-overflow-scrolling: touch;は、iOS デバイスのベンダー固有のプロパティです。これにより、親コンテナにタッチ スクロール メカニズムが確実に使用され、iOS でのスムーズなスクロールが可能になります。

これらの CSS 変更を組み込むことで、iframe は指定されたサイズを維持しながら、上での優雅なオーバーフロー スクロールを可能にします。 iOS デバイス。

以上がCSS を使用して iOS デバイスの Iframe サイズの問題を解決する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。