I'm building a React app that can be injected in a page as a normal html element. I ran into the issue of webpages that don't use the viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1">. I am required to make my injected element scale properly on mobile devices, even though the page it is injected into doesn't.

I've tried adding classes that represent the current viewport width and using them similarly to media queries, however I can not deal with the font sizes not scaling properly, since using rems would use the page font size which itself doesn't scale.

I even resorted to using transform: scale((window.innerWidth / window.screen.width).toFixed(3)) but that is hardly controllable.

Any ideas on how can I achieve this?