我的应用程序具有在iframe中加载另一条路线的功能。目的是更改一些布局设置，颜色等，并查看该页面在浏览器中的最终版本和原始版本（在台式机或笔记本电脑中为100％）。
问题是iframe被加载到一个div中，该div具有系统宽度的2/3（它是一个Bootstrap列）。这比我们的媒体查询断点小，iframe内容正在加载响应式设计。但这违反了第一段的规则。
我需要它是原始页面的小型版本。
有没有办法实现这个结果？
我想要做的是在Google的PageSpeed上与此类似： https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fstackoverflow.com%2F&tab=desktop
不同之处在于谷歌拍照并且在我的应用程序中必须允许用户与页面进行交互，浏览其他链接，单击按钮等。这是一个屏幕模拟器/预览器，但没有响应。
答案 0 :(得分：1)
正如CBroe所提到的，问题是iframe中加载的页面的CSS使用iframe的大小作为其视口大小。您希望根据您希望显示实际页面的方式来调整iframe的大小（例如，1200px宽），然后使用scale转换来缩小iframe的大小。
您的HTML可能如下所示：
<iframe width="1200" height="600" src="https://example.com"></iframe>
然后使用CSS重新缩放：
iframe {
transform: scale(0.3);
transform-origin: top left;
}