Geek Answers Handbook

Emulate mobile screen size via iframe

Just a random thought, What should I do if I would like to demonstrate responsive web design without changing the size of the browser window, but actually loading the responsive website into IFRAME with the same size as on the mobile screen. Could this work?

assuming i have an iframe

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

into which I upload a responsive website. and then ask the user to check by changing the width and height of the iframe in their browser.

IF this can work, it can be a boon to customers who know nothing about browsers.

+6
source share
3 answers

I win :) There is one known, you can use or study.

http://mattkersley.com/responsive/

To be more specific, the iframe absolutely allows you to change the height and width , and its contents respond to this - that is, @media works.

+10
source

You can use the HTML iframe seamless property, and it will be displayed in the width that you provide, for example, for iPad:

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

Also, if you want to use it in XHTML documents, since attribute prohibition is forbidden, you will need to define it as <iframe seamless="seamless"> .

EDIT: Unfortunately, according to w3schools , the seamlessness attribute is depreciating and browsers no longer support it, although I can still use it.

+1
source

What you offer should work, assuming you have nothing more than a child intentionally capturing CSS from a parent, etc.

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

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

It’s not difficult to use, but I think it’s more difficult than just telling the customer “click here”.

0
source

More articles:


All Articles