Einige Schriftgrößen werden auf Safari (iPhone) größer gerendert.

Gibt es CSS oder andere Gründe, warum Safari / iPhone einige Einstellungen für die Schriftgröße ignoriert? Auf meiner speziellen Website rendert Safari auf dem iPhone einige Schriftgrößen: 13px Text größer als Schriftgröße: 15px Text. Unterstützt es möglicherweise nicht die Schriftgröße einiger Elemente?

In Joes Antwort sind einige bewährte Methoden enthalten, aber ich denke, das Problem, das Sie beschreiben, beruht auf der Tatsache, dass Mobile Safari Text automatisch skaliert, wenn der Text zu klein wird. Sie können dies mit der CSS-Eigenschaft umgehen -webkit-text-size-adjust. Hier ist ein Beispiel, wie Sie dies auf Ihren Körper anwenden können, nur für das iPhone:

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

Verwenden Sie 100% anstelle von Keine.

normalize.css enthält dies

Stellen Sie außerdem sicher, dass Sie die anfängliche Zoomeinstellung in Ihrem Ansichtsfenster-Meta-Tag auf 1 setzen:

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

Ich verwende keine Pixeldefinitionen mehr, da sie wirklich verwirrend sind und bei visuellen Diensten nicht genau gleich sind.

Treffen Sie die Einheiten

1. "Ems" (em): Das "em" ist eine skalierbare Einheit, die in Webdokumentmedien verwendet wird. Ein em entspricht der aktuellen Schriftgröße. Wenn beispielsweise die Schriftgröße des Dokuments 12pt beträgt, entspricht 1em 12pt. Ems sind von Natur aus skalierbar, sodass 2em gleich 24pt, .5em gleich 6pt usw. ist. Ems werden aufgrund der Skalierbarkeit und ihrer Mobilgerätefreundlichkeit in Webdokumenten immer beliebter.
2. Pixel (px): Pixel sind Einheiten mit fester Größe, die in Bildschirmmedien verwendet werden (dh auf dem Computerbildschirm gelesen werden sollen). Ein Pixel entspricht einem Punkt auf dem Computerbildschirm (die kleinste Teilung der Bildschirmauflösung). Viele Webdesigner verwenden Pixeleinheiten in Webdokumenten, um eine pixelgenaue Darstellung ihrer Website zu erstellen, wenn diese im Browser gerendert wird. Ein Problem mit der Pixeleinheit besteht darin, dass sie für sehbehinderte Leser nicht nach oben oder für mobile Geräte nach unten skaliert werden kann.
3. Punkte (pt): Punkte werden traditionell in Printmedien verwendet (alles, was auf Papier gedruckt werden soll usw.). Ein Punkt entspricht 1/72 Zoll. Punkte ähneln Pixeln insofern, als sie Einheiten mit fester Größe sind und nicht skaliert werden können.
4. Prozent (%): Die prozentuale Einheit ähnelt der „em“ -Einheit, abgesehen von einigen grundlegenden Unterschieden. In erster Linie entspricht die aktuelle Schriftgröße 100% (dh 12pt = 100%). Während Sie die Prozenteinheit verwenden, bleibt Ihr Text für mobile Geräte und für die Barrierefreiheit vollständig skalierbar.

Ich hatte das gleiche Problem, im ursprünglichen CSS stellte sich heraus, dass es diese Zeile gab:

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

Ich musste es auf 100% ändern und alles war glatt. Es ist nicht erforderlich, alle px in em oder %% zu ändern.

Überprüfen Sie auch, ob für die Elemente, die Sie bearbeiten, keine "Breite / Höhe" festgelegt ist. Safari gibt der Größe Vorrang vor der Schriftgröße in SVGs. Chrome und FF scheinen dies derzeit zumindest nicht zu tun.