Alcune dimensioni dei caratteri vengono visualizzate più grandi su Safari (iPhone)

Ci sono CSS o altri motivi per cui Safari / iPhone ignorerebbe alcune impostazioni delle dimensioni dei caratteri? Sul mio sito Web specifico, Safari sull'iPhone rende alcune dimensioni del carattere: testo 13px più grande della dimensione del carattere: testo 15px. Forse non supporta la dimensione del carattere su alcuni elementi?

La risposta di Joe contiene alcune buone pratiche, ma penso che il problema che stai descrivendo sia incentrato sul fatto che Mobile Safari ridimensiona automaticamente il testo se pensa che il testo sarà troppo piccolo. Puoi aggirare questo problema con la proprietà CSS -webkit-text-size-adjust. Ecco un esempio di come applicarlo al tuo corpo, solo per l'iPhone:

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}

Usa 100% invece di Nessuno.

normalize.css include questo

Inoltre, assicurati di impostare lo zoom iniziale su 1 nel metatag viewport:

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

Non uso più le definizioni dei pixel poiché creano confusione e non sono esattamente le stesse nei servizi visivi.

Incontra le unità

1. "Ems" (em): "em" è un'unità scalabile utilizzata nei supporti per documenti Web. Un em è uguale alla dimensione del carattere corrente, ad esempio, se la dimensione del carattere del documento è 12pt, 1em è uguale a 12pt. Gli Ems sono di natura scalabile, quindi 2em equivale a 24pt, 0,5em equivale a 6pt, ecc. Gli Ems stanno diventando sempre più popolari nei documenti web a causa della scalabilità e della loro natura mobile-device-friendly.
2. Pixel (px): i pixel sono unità di dimensioni fisse che vengono utilizzate nei media dello schermo (cioè per essere letti sullo schermo del computer). Un pixel è uguale a un punto sullo schermo del computer (la divisione più piccola della risoluzione dello schermo). Molti web designer utilizzano unità pixel nei documenti web per produrre una rappresentazione pixel-perfetta del loro sito così come viene visualizzato nel browser. Un problema con l'unità pixel è che non si scala verso l'alto per i lettori ipovedenti o verso il basso per adattarsi ai dispositivi mobili.
3. Punti (pt): i punti sono tradizionalmente utilizzati nei supporti di stampa (tutto ciò che deve essere stampato su carta, ecc.). Un punto è uguale a 1/72 di pollice. I punti sono molto simili ai pixel, in quanto sono unità di dimensioni fisse e non possono essere ridimensionate.
4. Percentuale (%): L'unità percentuale è molto simile all'unità "em", salvo alcune differenze fondamentali. Innanzitutto, la dimensione del carattere corrente è pari al 100% (cioè 12pt = 100%). Durante l'utilizzo dell'unità percentuale, il testo rimane completamente scalabile per i dispositivi mobili e per l'accessibilità.

Ho avuto lo stesso problema, risulta che nel CSS originale c'era questa riga:

-webkit-text-size-Adjust: 120%;

Ho dovuto cambiarlo al 100% e tutto è andato liscio. Non è necessario modificare tutti i px in em o %%.

Controlla anche se non hai una "larghezza / altezza" impostata per gli elementi che stai manipolando, Safari dà la precedenza al dimensionamento sulla dimensione del carattere in svg, Chrome e FF non lo fanno, a quanto pare, almeno attualmente.