css - 如何为移动设备显示缩放 50% 的 iframe 内容

Question

我在响应式 wordpress 网站中嵌入了一个 iframe。iframe 是一个交互式网络计算器，旨在以 900px 宽和 670 像素查看。我正在尝试在我的 wordpress 站点中使用媒体查询来指定 css，这将改变 iframe 的大小以及缩放 css 的内容.

@media screen and (max-width: 600px) {
  #calculator {  
    -ms-zoom: 0.5;
    -moz-transform: scale(0.5);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.5);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
  }
}

我的 iframe 指定为

<iframe id="calculator" style="float: top;" frameborder="0" width="900" height="670" src="someurl" scrolling="no"></iframe>

iframe 前后都有文本。wordpress 网站将 iframe 缩小到 50%，但在手机上，我们可以看到指定 iframe 的全宽和全高（分别为 900 和 670 像素）。即 wordpress 文本可能只占宽度的 40-50%，而屏幕的右半部分是空白。我试图添加

width: 450px;
height: 335px;

进入计算器的媒体查询css，但这会导致其他问题。该计算器旨在响应，但我不希望它是。根据指定更改 iframe 的大小会使计算器元素四处移动，并使整个计算器的纵横比。

我希望它看起来像计算器为 900 x 670 像素时的样子，只是缩小了 50%。什么是让 iframe 中的 html 认为它在大于 900px 宽的屏幕上呈现但实际上在移动屏幕上以该尺寸的 50% 呈现的最佳方法是什么？

标签： csswordpressiframe