通过 iframe 模拟移动屏幕大小

Emulating a mobile screen size through an iframe

本文关键字：屏幕移动 iframe 模拟通过更新时间：2023-09-26

只是一个随机的想法，如果我想展示响应式网页设计，而不是通过调整浏览器窗口的大小，而是在与移动屏幕具有相同尺寸的 IFRAME 中实际加载响应式网站，该怎么办？这能行吗？

假设我有一个内嵌框架

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

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

如果这可以工作，那么对于对浏览器一无所知的客户来说可能是一个福音。

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

http://mattkersley.com/responsive/

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

您可以使用

iframe seamless 的 HTML 属性，它将以您提供的宽度呈现，就像 iPad 的这样：

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

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

编辑：不幸的是，根据w3schools的说法，无缝属性被删除，浏览器不再支持它。

你的建议应该有效，假设你没有其他任何糟糕的东西，比如孩子故意从父级那里抢CSS等。

像 Firefox 的响应式设计视图这样的东西也是为你所说的而设计的：

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

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