I am building an application where there would be 3 preview buttons (Desktop, Mobile, Tablet). Users will be able to create their own design (such as card view/accordions) which would inherit bootstrap classes for responsiveness. Once they click on the preview buttons for eg Mobile/Desktop/Tablet, their created components would behave as per the viewport.

The necessary CSS is in place. The scenario can be achieved if we are using an iframe to load the component. When we are using the iframe that time the viewport behaves as a separate element, helping the CSS to render as it's getting the desired width for the breakpoint. But without the iframe it's not able to bring the outer shell, hence the CSS is waiting for the entire browser to resize, and then only it can show the changes. But I would want to remove the iframe dependency from the project. The project is being built using angular js 11.

For better understanding, it's the same thing that we experience when we do inspect elements and switch on the mobile emulator in chrome.

Any kind of help or another solution way around is highly appreciated.