Javascript 防止iframe加载响应性设计

我的应用程序具有在

iframe

中加载另一条路由的功能。其目的是更改一些布局设置、颜色等，并查看最终和原始版本的页面在浏览器中的外观（100%在台式机或笔记本电脑中）

问题是iframe加载在一个div中，该div的宽度约为系统宽度的2/3（它是一个引导列）。这比我们的媒体查询断点小，iframe内容正在加载响应设计。但这违反了第一段的规定

我需要它是原始页面的小型化版本

有没有办法达到这个效果

我试图做的与谷歌PageSpeed上的类似：

---

不同之处在于谷歌会拍照，而在我的应用程序中，必须允许用户与页面交互、浏览其他链接、单击按钮等。它是一个屏幕模拟器/预览器，但没有响应功能。

正如CBroe所述，问题在于，iframe中加载的页面的CSS使用iframe的大小作为其视口大小。您需要根据实际页面的显示方式（例如，1200px宽）调整iframe的大小，然后使用

scale

变换减小iframe的大小

您的HTML可能如下所示：

<iframe width="1200" height="600" src="https://example.com"></iframe>

---

这里有一个活生生的例子：

当然你会得到这种效果-媒体查询是基于具有的视口的，iframe会建立自己的查询。解决方法：将iframe元素放大，然后使用CSS再次缩小。使用

transform

？Genius！谢谢你！我在bootstrap列中使用它，带有

transform:scale（0.5）；宽度：200%

这样我就不需要静态宽度。

iframe {
  transform: scale(0.3);
  transform-origin: top left;
}