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

Question

嗨，我想在台式机上的网站上显示一个移动版本的网站，我该怎么做？

• 我当时正在考虑使用iframe，但是它们向我展示了iframe内的桌面版本。

• 我试图更改iframe的用户代理，但对我不起作用（可能是可行的）

• 我不想使用chrome inspector来实现这一目标。
• 我不想使用m.website.com之类的版本，因为我不知道如何生成所有不同的URL
• 如果可能的话，我更喜欢没有服务器的客户端解决方案
• 如果有开箱即用的解决方案，我会喜欢一些有效的代码

（例如，您可以尝试https://www.linguee.it/） 谢谢

在这里您可以看到问题 <iframe src="https://codepen.io" id="frame_1"></iframe> https://codepen.io/orlandoangular/pen/qQXPob

Answer 1

在标头部分中添加查看端口，如下所示：

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

像这样在CSS中使用媒体查询：

body {
    background-color: pink;
}

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