javascript - 如何使注入的元素在非响应页面上响应？

Question

我正在构建一个可以作为普通 html 元素注入页面的 React 应用程序。我遇到了不使用视口元标记的网页问题<meta name="viewport" content="width=device-width, initial-scale=1">。我需要使我注入的元素在移动设备上正确缩放，即使它注入的页面没有。

我已经尝试添加代表当前视口宽度的类，并将它们与媒体查询类似地使用，但是我无法处理无法正确缩放的字体大小，因为使用 rems 会使用本身无法缩放的页面字体大小。

我什至求助于使用transform: scale((window.innerWidth / window.screen.width).toFixed(3))，但这很难控制。

关于如何实现这一目标的任何想法？

标签： javascriptreactjsresponsive-design