Emulating a mobile screen size through an iframe

Question

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 s

Answer 1

You could use the HTML property of iframe seamless and it's going to render on the width that you provide, like this for an iPad:

<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">.

EDIT: Unfortunately, according to w3schools the seamless attribute is depreciated and the browsers don't support it anymore, although I can still use it.

Answer 2

What you propose should work, assuming you don't have anything else screwy like the child intentionally grabbing CSS from the parent etc.

Something like Firefox's responsive design view is designed for exactly what you are talking about too:

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".

Answer 3

I win :) There is one, well known, you can either use or learn from.

http://mattkersley.com/responsive/

To be more specific, iframe absolutely does allow you to change height and width and its content does respond to that - that is to say - @media works.