如何使 iFrame 在 iOS Safari 中具有响应能力？

iOS Safari 中的响应式 iFrame

在 iOS Safari 中使用 iFrame 集成内容时，实现响应能力可能具有挑战性，特别是当 iFrame 的内容包括水平滚动区域。

iOS 的默认值行为

如果 iFrame 的内容完全响应并且可以在不使用内部滚动条的情况下调整其大小，iOS Safari 将相应地调整 iFrame 的大小。

溢出问题

但是，添加溢出：滚动到 iFrame 的内容可能会破坏此行为。发生这种情况时，iOS Safari 会自动调整 iFrame 的大小，使溢出的内容可见。

解决方案

• 修改 iFrame 内容: 设置溢出div的宽度（例如#ScrolledArea） to:

  width: 1px;
  min-width: 100%;
  *width: 100%;

  这会强制 iOS Safari 遵循 min-width 值，确保 div 的宽度与 iFrame 的宽度匹配。

• 修改 iFrame : 如果您无权访问 iFrame 的内容，请将相同的 CSS 应用于 iFrame本身：

  iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
  }

  要实现此功能，您必须在 iFrame 上使用scrolling="no" 禁用滚动条。

通过实施以下解决方案之一，您可以在 iOS Safari 中实现响应式 iFrame，即使其内容涉及水平滚动。

以上是如何使 iFrame 在 iOS Safari 中具有响应能力？的详细内容。更多信息请关注PHP中文网其他相关文章！