показать мобильный сайт внутри рабочего стола

Question

Привет, я хотел бы показать веб-сайт мобильной версии на своем веб-сайте на настольном компьютере, как я могу это сделать?

• Я думал об использовании iframe, но они показывают мненастольная версия внутри iframe.

• Я пытался изменить пользовательский агент iframe, но у меня не работает (возможно, возможно)

• Я не хочу использовать Chrome Инспектор для достижения этой цели.
• Я не хочу использовать версию, такую ​​как 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">

Используйте Media Query в вашем CSS следующим образом:

body {
    background-color: pink;
}

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