Estoy creando una aplicación React que se puede inyectar en una página como un elemento html normal. Me encontré con el problema de las páginas web que no usan la metaetiqueta de la ventana gráfica <meta name="viewport" content="width=device-width, initial-scale=1"> . Debo hacer que mi elemento inyectado se escale correctamente en dispositivos móviles, aunque la página en la que se inyecta no lo hace.

Intenté agregar clases que representan el ancho de la ventana gráfica actual y usarlas de manera similar a las consultas de medios, sin embargo, no puedo lidiar con los tamaños de fuente que no se escalan correctamente, ya que usar rems usaría el tamaño de fuente de la página que no escala.

Incluso recurrí al uso de transform: scale((window.innerWidth / window.screen.width).toFixed(3)) pero eso es difícilmente controlable.

¿Alguna idea sobre cómo puedo lograr esto?