如何使用 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>

On 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中文網其他相關文章！