Discrasia tra desktop e mobile

[metatad]

Ho un layout di pagina, con una serie di schede; ciascuna di queste è uno slide, che si può aprire o chiudere.
Di default, al caricamento della pagina, alcune schede/slide sono aperte, altre sono chiuse.
Tutte le schede (aperte o chiuse che siano), hanno le stesse impostazioni di formattazione (font-size e line-height).
La stranezza è che, se la pagina viene aperta su desktop, il testo delle schede è perfettamente identico nella formattazione, sia nelle schede aperte che in quelle chiuse. Su mobile, invece, la dimensione dei caratteri sulle schede aperte è assolutamente più grande di quelle chiuse.
Nei due screenshot allegati, si può vedere cosa intendo.Nella parte superiore di ciascuna immagine, c'è una scheda che si presenta aperta al caricamento della pagina, nella parte inferiore c'è una scheda che era chiusa al caricamento, e che è stata aperta successivamente.
Nel primo screenshot, relativo alla pagina aperta su desktop, i caratteri hanno le stesse dimensioni in entrambe le schede, nel secondo screenshot, relativo alla pagina su mobile, i caratteri hanno dimensioni marcatamente diverse.
Nel CSS, i valori sono espressi in pixel, ma ho fatto una prova impostandone il valore in em, e la situazione è addirittura peggiorata (su mobile, il testo delle schede chiuse risultava ancora più piccolo!).
Da cosa può dipendere? E come è possibile ovviare?

[KillerWorm]

Probabilmente qualche regola CSS che viene saltata o applicata per quella determinata situazione. Inutile dire che senza vedere il codice CSS e relativo HTML, non è chiaro cosa avvenga su desktop e su mobile, ed è impossibile determinare quali possano essere le cause di tale differenza, ma posso solo ipotizzare che, quando le schede vengono aperte, qualche selettore CSS non ha più riferimento con quegli elementi; magari perché viene modificata la struttura HTML, o magari perché viene eliminata/aggiunta qualche classe che determina la dimensione del font.

Il fatto che sia differente tra desktop e mobile, può dipendere dai preakpoints nel CSS, se ad esempio il layout è responsive, o in generale da regole che sono appunto valide, o no, per tale situazione.

Senza vedere la pagina in questione, e relativo codice, è impossibile darti delle risposte mirate.
Nel caso, prova a postare un link alla pagina in questione.

Diversamente, se hai abbastanza pratica, puoi verificare tu stesso attraverso gli strumenti di sviluppo del tuo browser (F12). Anche su desktop, con lo strumento "modalità flessibile" (o "device", o quel che è, a seconda del browser che utilizzi) puoi verificare eventualmente se il problema si presenta per determinate dimensioni del viewport, come appunto succede su mobile; a quel punto puoi controllare che regole CSS sono applicate, o sovrascritte, per quei determinati elementi, quindi cercare di capire le cause del problema.

[metatad]

Facendo il controllo con il tool di sviluppo, in entrambe i casi (schede aperte di default, e schede aperte successivamente) mi da come attivi gli stessi valori CSS (font-size:14px; line-height:16px;).
La pagina è questa: http://www.ischiatophotel.it/testsize.php

[KillerWorm]

Si ho visto. Su mobile vedo il problema, le schede aperte risultano già con testo grande, a differenza di quelle chiuse che, dopo che vengono aperte, mostrano un testo più piccolo. Però noto un comportamento strano, se provo a ruotare lo schermo, automaticamente tutti gli slide, che al momento sono aperti, mostrano il testo grande. Come se la dimensione del testo venisse ricalcolata.

Ho dato uno sguardo anche io attraverso gli strumenti di sviluppo. Con Chrome, su desktop, riesco a riprodurre il problema attraverso la "device toolbar". Nonostante la differenza, a schermo, il CSS risulta impostato con gli stessi valori del font, come anche tu hai riscontrato.
Attraverso la scheda "Styles" ho anche provato, per gli elementi in questione, a togliere la spunta dalle regole font-size: 14px; e line-height: 16px;, per poi riabilitarle. In tal caso ho notato che, sul testo che viene mostrato inizialmente in piccolo, questo si ingrandisce una volta tolta la spunta da una di quelle due regole, però resta tale anche se rispunto quella regola. Il comportamento è chiaramente anomalo.

Il problema quindi penso non sia da imputare direttamente al CSS. Potrebbe dipendere da altri fattori, legati magari ad errori di calcolo relativi all'effetto slide prodotto attraverso JavaScript e/o ad errori strutturali sul codice HTML, per cui il browser va in confusione.

In effetti ho passato quella pagina sul validatore (vedi qui) e noto che ci sono parecchi errori (circa un migliaio tra errori e avvertimenti), alcuni poco rilevanti ma altri più importanti, che potrebbero sfasciare la struttura e causare il malfunzionamento. Ci sono anche errori JevaScript che puoi rilevare attraverso la console web del tuo browser.

Sinceramente non saprei cosa sia meglio consigliarti per risolvere il problema ma, vedendo tutti quegli errori, mi preoccuperei di iniziare ad aggiustarli, perlomeno quelli relativi alla struttura HTML, come tag chiusi male o non chiusi, id duplicati, e altre cose del genere che potrebbero influire sulla corretta visualizzazione della pagina. Poi è possibile che il problema non si risolva perché dovuto magari ad altri fattori, ma il mio consiglio resta quello di aggiustare prima quegli errori.

[metatad]

Do' un'occhiata agli errori segnalati dal validatore, poi vediamo se il problema persiste o meno...
Thanx!