如何使响应式 IFrame 在 iOS Safari 中正常工作？

iOS Safari 中的响应式 IFrame

在现代网络中，响应式 IFrame 对于将内容无缝集成到网站中至关重要。理论上，将 IFrame 的宽度设置为 100% 就足够了，但实际上，这种方法可能会在 iOS Safari 中遇到问题。

挑战

当 IFrame 的内容有内部滚动条，iOS Safari 会自动调整 IFrame 的大小以完全显示可滚动区域，即使 IFrame 宽度设置为100%。此行为可能会导致溢出的内容被遮盖。

解决方案

要纠正此问题并确保 iOS Safari 中的 IFrame 响应能力，有两个选项：

选项 1：修改 IFrame内容

如果您控制 IFrame 中的内容，请修改 div 的 CSS 并使其溢出：滚动到以下内容：

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

此技术会覆盖 iOS Safari 的默认行为，并且强制 div 的宽度为 100%，从而隐藏溢出。

选项 2：修改 IFrame本身

如果修改 IFrame 内容不可行，您可以将相同的 CSS 应用到 IFrame 本身：

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

但是，此选项需要使用以下命令禁用 IFrame 上的滚动条scrolling="no":

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

结论

通过遵循提供的任一解决方案，您可以确保 IFrame 在 iOS Safari 中保持响应，同时适应水平滚动内容中的区域。

以上是如何使响应式 IFrame 在 iOS Safari 中正常工作？的详细内容。更多信息请关注PHP中文网其他相关文章！