Visualizzazione diversa desktop mobile

[inventor4fun]

Ciao a tutti,
ho un problema che non riesco a risolvere e vorrei il vostro aiuto.
Ho creato una pagina html responsive ma quando visualizzo la versione mobile sul desktop, rimpicciolendo le dimensioni della finestra) le dimensioni dei caratteri non combaciano con quelle viste sul mio cellulare. Ho usato le dimensioni dei carattere in pixel e Times New Roman, la pagina è larga 300px. Allego una screenshot dove si vede la differenza.
problema.jpg

Ho messo delle righe grigie per far vedere la differenze di proporzioni.
Come si può risolvere? dove sbaglio ?
Grazie a tutti in anticipo

[inventor4fun]

Ciao, grazie per la risposta,
in realtà il sito è già fatto come il tuo esempio 1.

[inventor4fun]

Se sono già impostate le media query basta inserire la dimensione del font desiderata nella risoluzione desiderata...

E' proprio questo il problema, ho impostato le media query, fonti in pixel, font-family (Times New Roman) e le dimensioni del contenitore.
Pensavo fosse un problema di font ma come si vede dalla immagine lo smartphone usa il Times New Roman come il desktop.

[inventor4fun]

Puoi postare il tuo css?

Ho risolto, ho notato che il font Arial così come il Times non sono uguali tra mobile e desktop. Se guardi l'immagine vedi che il mobile è più schiacciato. Ho risolto caricando il font Arial direttamente sul server ed usando questo.