Wie kann man Design + CSS in Verbindung mit verschiedenen Browsern auf Android und iPhone analysieren?

Ich habe zurzeit erhebliche Probleme damit, wie unterschiedlich meine I-frames dargestellt werden, die in einer Lightbox zu sehen sind, nämlich hier:

Die Call-to-Action-Links im Text, die ein "kostenfreies Video-Kurzgespräch" anbieten, starten mittels Ui-Kit eine Lightbox, in der dann ein Joomla-Artikel in einem I-Frame erscheint.

Auf Desktop-Browsern sieht die Darstellung – unabhängig von der Breite des Browserfensters – immer ziemlich gleich aus. Aber auf Mobilgeräten ist die Darstellung fast schon "zufallsabhängig" und so nicht brauchbar. Getestet habe ich auf Android mit dem immer vorhandenen Webkit-Browser, mit Firefox, Brave und Opera-Mobi:

1.) Margins und Paddings des I-frame werden anscheinend beliebig unterschiedlich interpretiert.

2.) Die Schrifthöhe (font-size) ist sehr unterschiedlich, je nach Browser und mal kleiner, mal gleich und mal größer als die Schrift des Joomla-Artikels, der im I-frame dargestellt werden soll. (Firefox viel zu groß, Opera zu klein, Brave und Webkit richtig)

3.) Es gibt keine CSS-Anweisungen in meiner Website, die für solche Unterschiede verantwortlich sein können.

Nun habe ich viele Versuche unternommen, die fehlerhafte Darstellung zu analysieren, z.B. indem ich auf dem Desktop in Firefox den Useragent auf Android und diverse Browser gesetzt habe. Aber die auf dem Android-gerät zu sehenden Fehler tauchen da nicht auf.

Ich bräuchte also z.B. einen Firefox-Browser auf dem Android-Gerät, mitsamt den ganzen Inspektor-Tools oder das Webdeveloper-Plugin. Beides steht aber nicht zur Verfügung. Und wenn, dann wären wohl die angezeigten Daten so umfangreich, dass man sie auf dem kleinen Smartphone-Bildschirm gar nicht alle (lesbar) anzeigen könnte.

Es gibt kostenpflichtige Online-Simulatoren für Mobilgeräte. Aber diejenigen, die ich kenne, sind entweder zu teuer oder sie bieten nur eine grafische Darstellung und keinen "Inspector".

Frage: Wie kann ich auf effiziente Weise heraus finden, wo die Probleme in der Darstellung entstehen?

Korrektur zu Punkt 2: Firefox und Android Webkit zeigen die Margins und Paddings falsch an, wodurch der für Darstellungen verfügbare Platz im iFrame unnötig verkleinert wird. Brave (=Chrome) und Opera zeigen die Abstände komplett richtig an, verkleinern aber die Schrift etwas.

Ich möchte zumindest herausfinden, was ich ändern muss, damit auch Firefox und besonders der Webkit-Browser zu einer korrekten Anzeige kommen.

Und dazu benötige ich wiederum ein Tool, mit dem ich die auf einem Android gezeigte Website analysieren kann, wie bei Chrome / Firefox auf dem Desktop auch.