我添加了一个iframe,它在所有浏览器和某些设备中都能正常工作,但在iphone 6中却无法正常工作。该iframe没有响应。它不适合iPhone屏幕尺寸的100%。

我在网上找到了许多解决方案,但大多数解决方案都展示了如何在iphone中滚动iFrame。我不需要那个。我想使其响应并根据屏幕尺寸进行调整。

<div class="frame-container" style="position: relative; padding-bottom: 65.25%; padding-top: 30px; height: 0;">
<iframe id="frame" width="100%" height="1000px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe >
</div>


我已在上述示例的iframe中删除了src =“”

最佳答案

我们可以将padding-bottom设置为75%。因此需要为此设置高度,因为填充底部将控制高度。
而且我们不设置宽度,因为它会随着响应元素自动调整大小。
将“溢出”设置为“隐藏”可确保任何内容突出到此元素之外。

如果假设无法正确对齐,则尝试使用//“ iframe {max-width:100%;}”

10-05 20:23
查看更多