javascript 通过 iframe 模拟移动屏幕尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22776725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Emulating a mobile screen size through an iframe
提问by Aman Gupta
Just a random thought, What if I wanted to showcase a responsive webdesign not by resizing the browser window, but actually loading the responsive site in an IFRAME having the same dimension as that of a mobile screen. Can this work?
只是一个随机的想法，如果我不想通过调整浏览器窗口的大小来展示响应式网页设计，而是在与移动屏幕尺寸相同的 IFRAME 中实际加载响应式网站，该怎么办。这能行吗？
assuming that I have an IFRAME
假设我有一个 IFRAME
<iframe src="something" id="viewPort"/>
into which I load the responsive website. and then let the user test by adjusting the iframe width and height in their browser.
我将响应式网站加载到其中。然后让用户通过在浏览器中调整 iframe 的宽度和高度来进行测试。
IF this can work it can be a boon for clients who don't know a thing about browsers.
如果这可以工作，那么对于对浏览器一无所知的客户来说，这可能是一个福音。
回答by ZenMaster
I win :) There is one, well known, you can either use or learn from.
我赢了:) 有一个，众所周知，你可以使用或学习。
http://mattkersley.com/responsive/
http://mattkersley.com/responsive/
To be more specific, iframeabsolutely does allow you to change heightand widthand its content does respond to that - that is to say - @mediaworks.
更具体地说，iframe绝对允许您进行更改height，width并且其内容确实对此做出响应 - 也就是说 -@media有效。
回答by Philip D.
You could use the HTML property of iframe seamlessand it's going to render on the width that you provide, like this for an iPad:
您可以使用 iframe 的 HTML 属性，seamless它会在您提供的宽度上呈现，就像 iPad 一样：
<iframe src="yourURL" seamless width="768" height="1024"></iframe>
<iframe src="yourURL" seamless width="768" height="1024"></iframe>
Also if you wanna use it in XHTML documents, because attribute minimization is forbidden you will need to define it as <iframe seamless="seamless">.
此外，如果您想在 XHTML 文档中使用它，因为禁止属性最小化，您需要将其定义为<iframe seamless="seamless">.
EDIT:Unfortunately, according to w3schoolsthe seamless attribute is depreciated and the browsers don't support it anymore, although I can still use it.
编辑：不幸的是，根据w3schools的无缝属性已贬值，浏览器不再支持它，尽管我仍然可以使用它。
回答by DrLivingston
What you propose should work, assuming you don't have anything else screwy like the child intentionally grabbing CSS from the parent etc.
你建议的应该有效，假设你没有其他像孩子故意从父母那里抓取 CSS 之类的麻烦事。
Something like Firefox's responsive design view is designed for exactly what you are talking about too:
Firefox 的响应式设计视图之类的东西也是专为您所谈论的内容而设计的：
https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View
https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View
It's not hard to use, but I guess harder than just telling your client to "click here".
它不难使用，但我想比告诉您的客户“单击此处”更难。
