Mobile adaptation of the widget?

Question

css

Hello.
There is such a task:
The widget is embedded in the sites and works like a pop-up window (div with a background, etc.). Sites can be any, often without adaptation for mobile devices; The widget is embedded into the site using js and css files. The css widget has all the necessary media queries, for all screens, etc., the JavaScript widget adds meta with a viewport to the page.
The content of the widget should be shown adapted to the mobile device.
Problem:
1. When loading the main page of the site, if all the content is reduced to fit in the resolution of the mobile device, the font sizes in the widget have to be increased to 45px
2. In this case, the widget for each site looks different (depending on how much the content of the parent page is reduced )
What to do? How can I make the widget display the same way no matter where it is embedded?

Answer 1

Probably in the widget, the fonts are specified in em or%, just specify the font size you need and adjust the font size with media queries for each resolution