Incoerenze di rendering delle dimensioni dei caratteri su un iPhone

Sto testando il mio sito Web e sta funzionando bene su tutti i browser, tranne che per il browser iphone (penso che sia mobile Safari?) Che restituisce una parte di testo con un font più grande rispetto al resto. Ho controllato a mano i CSS e ho usato firebug sulla pagina e posso confermare che ho messo le stesse dimensioni a tutti loro. Come posso risolvere questo?

Per migliorare leggermente l’idea di Lukasz, prova a utilizzare la seguente regola nel tuo CSS:

body { -webkit-text-size-adjust: 100%; } 

L’utilizzo del valore ‘100%’ invece di ‘nessuno’, consente a tutti gli altri browser basati su Webkit di ridimensionare ancora il testo quando si utilizza la funzione di zoom mantenendo le dimensioni originali del carattere.

Safari mobile tenta di adattare il contenuto in modo che sia leggibile sullo schermo per impostazione predefinita – ha diversi stili predefiniti per altri browser.

Non conosco le regole esatte – ma quando si tratta di dimensioni dei caratteri, sembra che funzioni in questo modo:

  • Testo all’interno di un paragrafo, elemento di elenco o altro elemento di ‘testo’: applica lo stile dell’autore senza adattarlo.

  • Testo all’interno di un DIV o altro elemento non specifico: considera come “testo normale” e “adatta” la dimensione in base alle regole di Mobile Safari.

Quindi, la risposta breve è, avvolgere il testo in un paragrafo e applicare la regola relativa alla dimensione del carattere.

Ecco un esempio veloce e sporco:

   

SAN BENEDETTO - Si è ufficialmente aperta la campagna elettorale per le comunali di San Benedetto del Tronto 2011. Le elezioni regionali, oramai dietro le spalle, sembra siano servite più che per organizzare il territorio in crisi, per muovere le pedine in vista delle elezioni a Sindaco. ... Leggi tutto...

(ovviamente, dovresti spostare la regola della font-size del font-size nel file CSS).

Metti questa regola nel tuo CSS e il tuo problema è sparito:

 body { -webkit-text-size-adjust: none; } 

EDIT: la soluzione migliore, fornita dall’utente612626, è quella di utilizzare il valore 100% anziché nessuno.

Ho risolto lo stesso problema con:

  

Da HTML5Boilerplate attualmente è qui

Dare dimensione font-size:100% corpo font-size:100% , quindi utilizzare il metodo “em” per dare la dimensione del carattere a ogni elemento nel tuo sito web.

Questo renderà la dimensione del carattere del 100% della dimensione del carattere predefinito dal rispettivo browser. Ad esempio, il browser Safari per iPhone ha 12px = 1em (in ombra è necessario verificare localmente la dimensione predefinita del carattere). Quindi se vuoi avere una dimensione del font 10px, basta dividerlo per 12, cioè “0.83em”

Spero che tu capisca, cerca anche “unità css em”, avrai una visione migliore.