通过iframe模拟移动屏幕大小

Question

随便想一想， 如果我想展示响应式网页设计，而不是通过调整浏览器窗口大小，但实际上将响应式网站加载到与移动屏幕尺寸相同的IFRAME中，该怎么办？这可以吗？

假设我有一个IFRAME

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

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

如果这可行，对于不了解浏览器的客户来说，这可能是一个福音。

Answer 1

我赢了:)有一个，众所周知，你可以使用或学习。

http://mattkersley.com/responsive/

更具体地说，iframe绝对允许您更改height和width，其内容确实会对此做出回应 - 也就是说 - @media有效。

Answer 2

你可以使用iframe seamless的HTML属性，它会在你提供的宽度上呈现，就像这样对于iPad：

<iframe src="yourURL" seamless width="768" height="1024"></iframe>

此外，如果您想在XHTML文档中使用它，因为禁止属性最小化，您需要将其定义为<iframe seamless="seamless">。

修改 不幸的是，根据w3schools，无缝属性已被折旧，浏览器不再支持它，尽管我仍然可以使用它。

Answer 3

你建议的应该是有用的，假设你没有其他任何麻烦，就像孩子故意从父母那样抓住CSS等。

Firefox的响应式设计视图就像你所说的那样：

https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View

它不难使用，但我想比告诉你的客户点击这里＆＃34;。

更难。