适用于移动设备的响应式 iFrame 内容

Question

我的 iframe 已经在移动设备和网站上响应，但我的问题是内容本身总是从 iFrame 的宽度和高度溢出（溢出 X 和 Y）。

这是真实情况 - 移动视图（我正在使用 google chrome 来模拟 Galaxy Note 3、Pixel、Nexus 7 等的显示）

以及它的外观 - 网络视图

如您所见，内容溢出。我是 Android 工程师，所以我不是 Web 前端方面的专家。

这就是我所做的。我有 2 种可能的解决方案可以让我的 iFrame 响应。

第一个，换成这种样式

<style>
    .responsive-video {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 60px; overflow: hidden;
    }

    .responsive-video iframe,
    .responsive-video object,
    .responsive-video embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    iframe {
        width:400px;
        height:600px;
        overflow-x:hidden;
        overflow-y:hidden;
    }
</style>

<div class="responsive-video">
    <iframe src="http://localhost/html/media/html_games/test_games"></iframe>
</div>

第二个，使用bootstrap

<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="http://localhost/html/media/html_games/test_games"></iframe>
</div>

这两种解决方案都使 iFrame 能够响应移动设备和网络，但不能响应内容。请帮助如何使内容具有响应性，以便移动用户无需滚动 Y，如出现第一个屏幕截图中的问题。

.resp-container {
            position: relative;
            overflow: hidden;
            padding-top: 56.25%;
        }

.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

<div class="resp-container">
        <iframe class="resp-iframe" src="https://dev-wma-051-ccwuh3zg.qreatiq.net/media/html_games/fbibekasi_games1513/" allowfullscreen></iframe>
    </div>

上面是我的 sn-p 代码，上面的代码在浏览器上运行良好，但从移动设备查看时会溢出其内容。例如。 Galaxy Note3、Pixel 2 等

如果 sn-p 在移动视图上运行，我需要滚动查看所有内容。我想内容适合 iFrame。

Answer 1

我检查了代码，问题出在 iframe 的标签中，您可以在其中添加 overflow:hidden，或者您可以对缩放做一些事情。