不同设备的不同iframe

Question

我在Wordpress中遇到iframe问题。 我想将HTML5产品（计算器）放入Wordpress帖子，今天我有类似的东西：

在帖子中：

<iframe class="iframe" src="http://sitename.../index.html" scrolling="no"></iframe>

在CSS中：

.iframe { width: 300px; height: 225px; }
@media (min-width:400px) { .iframe { width: 350px; height: 263px; } }
@media (min-width:700px) { .iframe { width: 600px; height: 451px; } }

这就是问题所在： 当我在所有设备中打开这个HTML（除Wordpress之外）它看起来非常好并且它完全响应。

当我通过Iframe在Wordpress中打开此HTML时，HTML产品会填满所有Iframe，但字体和图片看起来像是＆＃34; pixelate＆＃34;。我猜HTML是以1024x768的宽度打开（它是起始宽度/高度），后来它是Iframe的缩放。

这是我的问题 - 如何让这个iframe更正，以便在所有设备中都有漂亮的字体/图像？