我在一个响应性的WordPress站点中嵌入了一个IFRAME。IFrame是一款交互式网络计算器，设计为以900px宽和670像素观看。我正试图在我的WordPress站点中使用媒体查询来指定将更改IFRAME大小以及缩放CSS内容的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和670px)。也就是说，WordPress文本可能只占宽度的40%-50%，而屏幕的右半部分是空白。我试着加了

width: 450px;
height: 335px;

进入媒体查询用于计算器的css，但这会引起其他问题。这个计算器被设计成具有响应性，但我不希望它是这样的。按指定更改iFrame的大小会使计算器元素四处移动，并影响整个计算器的纵横比。

我希望它看起来像是当计算器是900x670px时，只是缩小了50%。最好的方法是让iframe中的html认为它是在一个超过900px宽的屏幕上呈现的，但实际上是在移动屏幕上以50%的大小呈现的？