在桌面網站內顯示移動網站

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中使用Media Query：

body {
    background-color: pink;
}

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