jquery - 在响应式设计中按比例调整包含带有 Flash 内容的 HTML 的 IFRAME

Question

我有一个带有 IFRAME 的响应式设计，其中有一个 html 文件，里面有 flash 内容。

<iframe width="800px" height="600px" frameborder="0" align="middle" class="iframeStyle" src="linkToHtmlWithFlash.html"> </iframe>

现在我需要随着窗口宽度的变化按比例调整 IFRAME 及其包含的 flash 的大小。

我试过像这样结合 media query 和 transform:scale

@media (max-width: 767px){
 .iframeStyle {
    transform: scale(0.74);
    transform-origin: 0 0 0;
}
}
@media (max-width: 979px) and (min-width: 768px) {
 .iframeStyle {
    transform: scale(0.9);
    transform-origin: 0 0;
}
}

但这种方法似乎不太好，它只在达到截止点时才调整大小。

任何使用 jquery 或纯 CSS 的解决方案？

是否有任何使用纯 CSS 或 jQuery 的解决方案。

Answer 1

@media (max-width: 767px){
 .iframeStyle {
    transform: scale(0.74);
    transform-origin: 0 0 0;
    width:80%;
}
}
@media (max-width: 979px) and (min-width: 768px) {
 .iframeStyle {
    transform: scale(0.9);
    transform-origin: 0 0;
    width:100%;
}
}

使用此代码对您有用。

使用这个

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}