如何使用 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中文网其他相关文章！