html - 链接中包含的 iframe 的大小 - 如何调整移动/桌面的大小？

Question

我有一个 iframe，其中包含来自网站的视频流，并且 src 属性包含它的大小:

<iframe src="http://xxxxxxx.com/accounts/xxxxxx/events/xxxxxx/player?width=320&height=180 frameborder="0" scrolling="no"> </iframe>

我想在视口(viewport)变大时将其放大(比如移动设备宽度为 320px，桌面宽度为 960px)，但是当我通过 CSS 给它一个大小时，内容不会扩大到整个 iframe，因为链接内的大小错误。

大家有什么想法

Answer 1

CSS 媒体查询将是您的简单解决方案。您将不得不花时间将它应用到所有设备。您可以将它应用于所有 iFrame，但我建议定义一个类:

.myFrame {
    width: 960px
}
@media screen and (max-width: 480px) {
    .myFrame {
        width: 320px
    }
}

<iframe class="myFrame" src="www.iframecontent.com/content"></iframe>

更高级的解决方案是使用像 pym.js 这样的 javascript 工具

http://blog.apps.npr.org/pym.js/