Javascript 通过iframe模拟移动屏幕大小

只是一个随意的想法， 如果我不想通过调整浏览器窗口的大小来展示响应性网页设计，而是将响应性网站加载到与移动屏幕尺寸相同的IFRAME中，该怎么办。这行吗

假设我有一个IFRAME

<iframe src="something" id="viewPort"/>

我将响应网站加载到其中。然后让用户通过在浏览器中调整iframe的宽度和高度进行测试

---

如果这能起作用，对那些对浏览器一无所知的客户来说，这可能是一个福音。

假设你没有任何其他问题，比如孩子故意从父母那里抢CSS等，那么你的建议应该会起作用

Firefox的响应式设计视图也正是为您所谈论的内容而设计的：

使用它并不难，但我想这比告诉你的客户“点击这里”更难。

我赢了：）有一个，众所周知，你可以使用，也可以从中学习

---

更具体地说，

iframe

绝对允许您更改

高度

和

宽度

，它的内容确实响应了这一点-也就是说，

@media

可以工作。

您可以使用iframe

无缝

的HTML属性，它将根据您提供的宽度进行渲染，比如iPad：

另外，如果您想在XHTML文档中使用它，因为禁止属性最小化，您需要将其定义为

编辑：

---

不幸的是，无缝属性已经贬值，浏览器不再支持它，尽管我仍然可以使用它。

是的，它可以工作，虽然我不知道你的客户是否会发现“调整iFrame的大小”比“调整浏览器的大小”更容易。我只是想通过点击显示一个桌面和一个移动视图，这一切都是很好的，我去了那里，从element inspector更改了iFrame的大小。它真的很有效：数据呈现方式与移动设备不同。移动设备具有视口缩放，而iFrame没有。例如，尝试在手机上加载pages.github.com，然后在上面的iframe中（向下滚动一点到内容）。这并不像Tom指出的那样通过iframe模拟移动屏幕大小。