防止 iframe 在移动设备上完全垂直扩展答案

【问题标题】：prevent iframe from fully expanding vertically on mobile防止 iframe 在移动设备上完全垂直扩展
【发布时间】：2016-10-21 02:09:41
【问题描述】：

我正在使用显示列表的 iframe，该列表在垂直方向上非常高。我已将 iframe 的高度设置为600px，因此在桌面上它会显示该高度，并且可以向下滚动浏览内容。

问题是，在移动设备上查看我的网站时，iframe 会扩展至全高（滚动时不再是 600 像素）。

我的 iframe：

<iframe src='url' width='360' height='600'></iframe>

我的CSS：

iframe {
    border: 1px solid black
    padding: 3px;
    height: 600px;
    overflow: scroll;
}

我尝试用div 包围我的iframe，如下所示，引用自this question，这是一个稍微相关的问题，但它仍然会扩展。

<div style="overflow:auto; -webkit-overflow-scrolling:touch">
    <iframe src='url' width='360' height='600'></iframe>
</div>

如何防止 iframe 在移动设备上展开？这甚至可能吗？

【问题讨论】：

你怎么能确认它是 > 600px :) 我的意思是 600px 是相当大的高度？ :) 除了在你的元素定义中，定义宽度和高度的单位真的很好
@MarkoMackic 谢谢，我会尝试明确说明单位

标签： html iframe responsive-design

【解决方案1】：

所以尺寸也需要添加到周围的 div 中：

<div style="overflow:auto; -webkit-overflow-scrolling:touch; width:360px; height:600px;">
    <iframe src='url' width='360' height='600'></iframe>
</div>

将边框 css 移动到 div 而不是 iframe 会更有意义。

【讨论】：