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?
Rispondi quotando