Estoy creando una aplicación donde habría 3 botones de vista previa (Escritorio, Móvil, Tableta). Los usuarios podrán crear su propio diseño (como vista de tarjeta/acordeones) que heredaría clases de arranque para la capacidad de respuesta. Una vez que hagan clic en los botones de vista previa para, por ejemplo, Móvil/Escritorio/Tableta, sus componentes creados se comportarán según la ventana gráfica.

El CSS necesario está en su lugar. El escenario se puede lograr si estamos usando un iframe para cargar el componente. Cuando usamos el iframe en ese momento, la ventana gráfica se comporta como un elemento separado, lo que ayuda a que el CSS se renderice a medida que obtiene el ancho deseado para el punto de interrupción. Pero sin el iframe no es posible traer la capa exterior, por lo tanto, el CSS está esperando que todo el navegador cambie de tamaño, y solo entonces puede mostrar los cambios. Pero me gustaría eliminar la dependencia de iframe del proyecto. El proyecto se está construyendo usando angular js 11.

Para una mejor comprensión, es lo mismo que experimentamos cuando inspeccionamos elementos y encendemos el emulador móvil en Chrome.

Cualquier tipo de ayuda u otra solución es muy apreciada.