在移动图像上完成网站布局

Question

So I have a full fledged website which has 100s of webpages. Now, what my requirement is that whole website layout should be displayed on a mobile image when we click a button in the viewing device. To be more clear, suppose we have facebook website. I'm on the log in page, when I click on sign up page, new webpage should open up which will have a mobile device picture(iphone or android) and this picture will have whole facebook site on it. It would be kind of like using facebook website on real mobile device. In the image imagine the red bordered square is a mobile device picture and on top of it I want to display complete facebook website

My question is what's the best possible way to achieve this? And solution should be responsive in all the devices.

Answer 1

I am not shure if i understand you, but...

you could use an iFrame and resize it to fit into the screen of an image of an iPhone. But iFrames have some restrictions. I think safari for example do not allow cookies in iFrames.