为什么我的响应式 IFrame 无法在 iOS Safari 中工作？

如何在 iOS Safari 中使 IFrame 响应式

使用 IFrame 将内容合并到网站中时，IFrame 保留内容至关重要它的响应能力。虽然使用 HTML 或 CSS 将 IFrame 的宽度设置为 100% 似乎很简单，但 iOS Safari 提出了独特的挑战。

具有外部滚动的响应式 IFrame

如果 IFrame内容完全响应式，无需内部滚动条，iOS Safari 将自动调整 IFrame 的大小，而无需

具有内部滚动的响应式 IFrame

但是，当 IFrame 内容包含水平滚动区域时，就会出现问题。 iOS Safari 调整 IFrame 大小以确保这些滚动区域完全可见，忽略溢出设置。

解决方案

要解决此问题，有两种解决方案：

修改 IFrame内容：

1. 将 IFrame 内容中滚动 div 的宽度（例如 div#ScrolledArea）设置为：

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

2. 此确保 div 的宽度小于 IFrame 的宽度，但仍允许其占用 100% 的可用空间

修改 IFrame 元素：

1. 如果您无权访问 IFrame 的内容，您可以应用与 IFrame 相同的 CSS本身：

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

2. 此外，使用scrolling="no"属性禁用 IFrame 上的滚动条。

以上是为什么我的响应式 IFrame 无法在 iOS Safari 中工作？的详细内容。更多信息请关注PHP中文网其他相关文章！