在桌面网站内显示移动网站

Question

Hi I would like show a mobile version website in my website on a desktop computer, how I can do it?

• I was thinking using an iframe, but they show me the desktop version inside the iframe.

• I tried to change the user-agent of the iframe but doesn't work for me (maybe is possible)

• I don't want use chrome inspector to achieve this.
• I don't want use version like m.website.com because I don't know how to generate all the different URL
• I prefer a client solution without server if is possible
• If there is a solution out of the box I'll love have some working code

(for instance you can try https://www.linguee.it/ ) Thanks

here you can see the problem <iframe src="https://codepen.io" id="frame_1"></iframe> https://codepen.io/orlandoangular/pen/qQXPob

Answer 1

Add view port in header section like this:

<meta name="viewport" content="width=device-width, initial-scale=1">

Use Media Query in your css like this:

body {
    background-color: pink;
}

@media screen and (max-width: 480px) {
    body {
        background-color: lightgreen;
    }
}