Iframe e @media query

[Niknex]

Buongiorno!
Parto con il premettere che ero in dubbio se pubblicare la discussione qua o nella categoria "javascript". Spero di aver azzeccato!

Gestisco una CRM completo di css con media query che gestiscono sia la "versione desktop" che quella "mobile".

Per una decisione aziendale il login non viene fatto più sullo stesso dominio ma, tramite "<iframe>", viene mostrata la pagina di login sul sito-vetrina dell'azienda (per aumentarne la visitatori etc).

Il problema sorge, appunto, quando l'intera pagina di login, tramite tag ifram (wordpress), viene inserita in una pagina del sito-vetrina. In questo caso, per quanto riguarda i telefoni, si sovrappone il mio CSS (con @media) con le dimensioni ridotte dell'iframe (viene applicato lo stile "mobile" come da @media e in più l'intera pagina viene ridimensionata per stare all'interno del tag iframe).
In caso di pc la pagina subisce semplicemente un effetto "zoom-out", mentre per quanto riguarda la versione "mobile" viene totalmente stravolto lo "stile".

Premetto che sono davvero un neofita per quanto riguarda il css. Quindi vi chiedevo se c'era un modo, tramite html, sulla pagina di login, di "settare" le dimensioni della pagina caricata non con quelle del dispositivo ma con quelle del tag iframe su cui, effettivamente, viene caricata.

Googleando un po' penso che il "trucco" si quella di lavorare sul tag meta-viewport, ma aime, vista la poca esperienza, ancora non ne sono venuto a capo.

Allego foto dimostrative del problema in fondo. N.B: Le parti "censurate" riguardano il nome dell'azienda che, per privacy, ho dovuto omettere!

P.S: Ovviamente ho escluso la possibilità di modificare direttamente il css del CRM in quanto non lavora sulla pagina di login ma su tutto il sito. Quindi andrei in contro a più "contro" che benifici su questa strada.

Ringrazio anticipatamente per le risposte. Se ho omesso dei dettagli rilevanti chiedete pure che provvedo ad aggiornare.

Pagina originale:
neo (2).jpg

Pagina su iframe (desktop):
neo (3).jpg

Pagina su iframe (mobile):
neo (4).jpg

[KillerWorm]

... ero in dubbio se pubblicare la discussione qua...

[MOD]
Ciao, l'argomento potrebbe abbracciare più sezioni (HTML, CSS ed eventualmente JavaScript) ma per il momento continuiamo su questa.
[/MOD]

tramite "<iframe>", viene mostrata la pagina di login sul sito-vetrina
[...]
Googleando un po' penso che il "trucco" si quella di lavorare sul tag meta-viewport

E questo è già ciò che avviene sul sito vetrina. Dalle immagini deduco infatti che è stata applicata una "impostazione responsive" per la viewport, per tale motivo l'intera pagina non viene semplicemente scalata per farla entrare nella finestra (come normalmente accade per un sito non responsive), ma i contenuti sono appunto ridisposti mantenendo la scala a 1.

Il punto è che le impostazioni della viewport applicate al top-level hanno effetto sull'intera pagina compresi i contenuti caricati. Ciò significa che anche se tu applicassi altre impostazioni nella pagina login, queste non hanno effetto una volta che la carichi dentro un iframe.

Lasciando le impostazioni della viewport così come sono, il problema sta nel fatto che l'iframe stesso risulta più piccolo rispetto alle dimensioni del breakpoint CSS più piccolo impostato per la pagina login. Penso che il layout si sfasci proprio per questo motivo.

Non ho idea di come siano impostate le media query nella tua pagina login ma a mio parere potresti impostare un ulteriore breakpoint in cui gli elementi del form login possano disporsi correttamente per la visualizzazione dentro l'iframe.

Verifica magari le effettive dimensioni dell'iframe nel punto critico; puoi eventualmente usare gli strumenti del tuo browser per analizzare l'elemento e risalire alle dimensioni esatte.

Mettiamo il caso che sia 360x240px

Fatto questo, se per esempio il tuo breakpoint più piccolo è (min-width: 480px), aggiungi un altro del tipo (min-width: 360px) e quindi imposta le varie regole per disporre al meglio gli elementi: riduci eventuali margini/padding tra gli elementi, riduci magari le dimensioni stesse dei campi, del font, delle icone, ecc. Verifica quindi che il tutto stia dentro la dimensione dell'iframe; tra gli strumenti di sviluppo del tuo browser puoi usare la visualizzazione flessibile, per aiutarti.

Chiedi pure, se hai ulteriore bisogno di aiuto.