如何使 IFrame 在 iOS Safari 中具有响应能力，即使有内部滚动条？

在 iOS Safari 中使 IFrame 具有响应能力

问题描述

使用 IFrame 将内容集成到网站中需要 IFrame 具有响应能力。将 iframe 宽度设置为 100% 等基本 CSS 解决方案可能还不够。然而，当 iframe 内容具有内部滚动条时，实现响应能力变得特别具有挑战性。

具有滚动区域的响应式 IFrame

要使 IFrame 在 iOS Safari 中响应，即使内容包含滚动区域，您也需要有两个选项：

选项 1：修改内容

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

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

   登录后复制
2. 这会强制 iOS Safari正确调整 iframe 的大小，使滚动区域发挥作用。

选项2：修改iframe

1. 如果您无权访问iframe内容，可以将以下CSS应用到iframe本身：

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

   登录后复制

2. 但是，您必须在 iframe 中添加scrolling="no" 来禁用滚动HTML:

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

   登录后复制

注意

在选项 2 中，禁用 iframe 中的滚动会阻止您使用 iframe 内容中的滚动区域。但是，如果修改 iframe 内容（选项 1），则可以保留滚动功能。

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