我正在尝试为我的 Web 组件构建一个小型预览器。我页面上的所有内容都使用媒体查询进行响应，我正在尝试构建一个小容器，我可以在其中预览页面的一小部分。在这个容器的上方，我放置了不同屏幕宽度的切换开关。当我单击其中一个切换时，我的容器会相应地调整大小，并且里面的内容会根据媒体查询触发的内容显示。
我发现如何做到这一点的唯一方法是使用 iframe。它可以工作 - 但是总是必须将内容放在单独的文件中以链接到 iframe 的 src 是一件麻烦事。另外 - 必须将 iframe 高度设置为内容需要的任何问题。
目前：
<a href="javascript:$('.preview1').attr('width', '320')">320px</a> <!-- etc... -->
<div class="container">
<iframe class="preview1" src="component1.html" seamless></iframe>
</div>
有没有可能使用 javascript 在我的容器上触发不同的媒体查询？模拟屏幕调整大小？