如何修复 iOS Safari 中的 IFrame 响应问题？

解决 iOS Safari 中的 IFrame 响应问题

使用 IFrame 将外部内容集成到网站中通常会给在现代设备上保持响应能力带来挑战。这个问题在 iOS Safari 中尤为明显，其中 IFrame 可能无法完全调整其大小。

要解决这个问题，我们必须首先了解根本原因。当 IFrame 内容拥有内部滚动条时，iOS Safari 浏览器会自动调整 IFrame 的大小以容纳滚动条的全部内容。这种行为与所需的响应能力相矛盾。

解决方案

有两种有效的方法可以解决此问题：

1.修改 IFrame 内容

如果您可以控制嵌入的 IFrame 的内容（即 Content.html），则可以修改滚动区域（div#ScrolledArea）的 CSS：

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

此 CSS 设置最小宽度，确保 IFrame 永远不会超过视口宽度。 min-width 和 *width 值会覆盖 iOS Safari 的默认行为。

2.修改 IFrame 元素

如果无法访问 IFrame 内容，可以操作 IFrame 元素本身：

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

但是，此方法需要在 IFrame 上禁用滚动条使用scrolling="no"属性：

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

虽然禁用滚动条是必要的，但修改IFrame 内容仍然是在 IFrame 内保留滚动条的首选解决方案。

两种解决方案都确保 IFrame 的宽度具有响应性，并且滚动区域按预期运行。

以上是如何修复 iOS Safari 中的 IFrame 响应问题？的详细内容。更多信息请关注PHP中文网其他相关文章！