Предотвращение iframe от загрузки адаптивного дизайна

Question

Мое приложение имеет функциональность, которая загружает другой маршрут в iframe. Цель состоит в том, чтобы изменить некоторые настройки макета, цвета и т. Д. И посмотреть, как эта страница будет выглядеть в браузере в ее окончательной и оригинальной версии (100% на рабочем столе или ноутбуке).

Проблема в том, что iframe загружается в div, который имеет что-то вроде 2/3 ширины системы (это столбец Bootstrap). Это меньше, чем наша точка прерывания медиа-запроса, а содержимое iframe загружает отзывчивый дизайн. Но это нарушает правило в параграфе 1.

Мне нужна была миниатюрная версия исходной страницы.

Есть ли способ достичь этого результата?

То, что я пытаюсь сделать, это как-то похожее на это на PageSpeed ​​Google: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fstackoverflow.com%2F&tab=desktop

Разница заключается в том, что Google делает снимок и в моем приложении, пользователь должен иметь возможность взаимодействовать со страницей, просматривать другие ссылки, кнопки и т. д. Это симулятор экрана/предварительный просмотр, но не реагирует.

Answer 1

Как упоминал CBroe, проблема в том, что CSS для страницы, загруженной в iframe, использует размер iframe в качестве размера видового экрана. Вы хотите, чтобы размер iframe соответствовал тому, как вы хотите, чтобы фактическая страница отображалась (например, 1200px), а затем используйте преобразование scale, чтобы уменьшить размер iframe.

Ваш HTML может выглядеть следующим образом:

<iframe width="1200" height="600" src="https://example.com"></iframe> 

Затем отмасштабировать с помощью CSS:

iframe { 
    transform: scale(0.3); 
    transform-origin: top left; 
} 

Вот живой пример: https://codepen.io/JoshuaToenyes/pen/gMMLze