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

110

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?

css safari mobile-safari font-size Alex
quelle

Antworten:

248

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;
  }
}
David Kaneda
quelle
2
Bin gerade auf dieses Problem gestoßen. Dieser kleine Medienbildschirm-Hack funktioniert einwandfrei. Ich werde damit beginnen, es in meine CSS-Starterdatei aufzunehmen.
Throttlehead
1
Wow, krank! Ich habe mich verrückt gemacht und sogar versucht, den Klassennamen zu ändern und CSS in Einklang mit jQuery zu setzen, bevor ich dies fand. Lebensretter!
Christoffer Bubach
1
Es hat sehr geholfen. Prost :)
Toter Mann
2
Stellen Sie sicher, dass Sie die Medienabfrage verwenden. Es scheint, dass dies einige Texte schwer lesbar machen kann: Vorsicht vor -webkit-Textgröße anpassen: keine
Gemmu
9
Die Antwort sollte auf aktualisiert werden -webkit-text-size-adjust: 100%- dies vermeidet die automatische Aktualisierung, ermöglicht jedoch ein vom Benutzer initiiertes Zoomen. (Quelle)
Shawn Erquhart
11

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;" />
Johnpolacek
quelle
7

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.

quelle
4
Die Antwort ist, 1 vordefinierte Einheit für den Text (dh 12pt) zu verwenden und dann für alle nachfolgenden CSS-Definitionen die Schriftgröße zu verwenden: 90%; oder Schriftgröße: 110%; usw. usw. Dies ist für alle unterstützten Geräte leichter zugänglich.
1
Sie haben das Wichtigste vergessen: REM (Referenz EM). Sie können es im gesamten Dokument verwenden und es bleibt gleich (es wird nicht kaskadiert).
Andrew Swift
3
Diese Antwort ist nicht relevant und beantwortet die Frage in keiner Weise. Die Frage betraf Texte unterschiedlicher Größe, die unterschiedlich gerendert wurden, nicht die zu verwendenden Einheiten. Das Problem bleibt wirklich dort, egal welche Einheiten verwendet werden.
Rauli Rajande
0

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.

me1974
quelle
Der Designer sollte sie sowieso für Schriftgrößen verwenden.
Nick Turner
2
... außer im Body-Tag-CSS, wo eine px-Größe am besten ist.
Matt Parkins
0

Ü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.

marebuffi
quelle