CSSを使用してiOSのiframeサイズを制御する方法?

CSS による iOS iframe サイズ制御

フレーム サイズを超えるコンテンツを含む iframe を使用している場合、予期しない動作が発生する可能性がありますiOS上で。他のブラウザとは異なり、iOS の Safari は、オーバーフロー コンテンツに合わせてフレームのサイズを変更します。

次の HTML 構造を考慮してください:

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

CSS:

<code class="css">.frame_holder {
  position: absolute;
  left: 50px;
  right: 50px;
  top: 50px;
  bottom: 50px;
  background: #ffffff;
}

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

オンiOS では、iframe は、指定された CSS 高さを無視して、コンテンツに合わせてサイズ変更されます。これを防ぐには、次の CSS を使用してラッピング div を追加する必要があります:

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

更新された HTML と CSS:

<code class="html"><div class="frame_holder">
  <div style="overflow: auto; -webkit-overflow-scrolling: touch;">
    <iframe class="my_frame"></iframe>
  </div>
</div></code>

このソリューションは、追加の制御層を追加し、強制的にフレームは指定された CSS 寸法に準拠し、すべてのブラウザーで一貫した動作が保証されます。

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