webentwicklung-frage-antwort-db.com.de

Einige Schriftgrößen wurden auf Safari (iPhone) größer dargestellt.

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

csssafarimobile-safarifont-size
94
Alex

Die Antwort von Joe enthält einige bewährte Vorgehensweisen, aber ich denke, das Problem, das Sie beschreiben, dreht sich um die Tatsache, dass Mobile Safari Text automatisch skaliert, wenn er der Ansicht ist, dass der Text zu klein dargestellt wird. Sie können dies mit der CSS-Eigenschaft -webkit-text-size-adjust umgehen. Hier 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;
  }
}
217
David Kaneda

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

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

Verwenden Sie 100% anstelle von Keine.

normalize.css beinhaltet dies

9
user3276706

Ich verwende keine Pixeldefinitionen mehr, da sie wirklich verwirrend sind und nicht mit allen visuellen Diensten identisch sind. 

Treffen Sie die Einheiten

  1. „Ems“ (em): Das „em“ ist eine skalierbare Einheit, die in Webdokumenten verwendet wird. Ein em entspricht der aktuellen Schriftgröße. Wenn beispielsweise die Schriftgröße des Dokuments 12 pt beträgt, entspricht 1em 12 pt. Ems sind in der Natur skalierbar, daher entspricht 2em 24pt, .5em 6pt usw. Ems werden in Webdokumenten aufgrund der Skalierbarkeit und ihrer gerätefreundlichen Art immer beliebter.
  2. Pixel (px): Pixel sind Einheiten fester Größe, die in Bildschirmmedien verwendet werden (d. H. Zum Lesen auf dem Computerbildschirm). Ein Pixel entspricht einem Punkt auf dem Computerbildschirm (der kleinsten Unterteilung 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 bei der Pixeleinheit ist, dass sie für sehbehinderte Leser nicht nach oben skaliert oder für mobile Geräte nach unten skaliert wird.
  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, da sie Einheiten fester Größe sind und ihre Größe nicht skalieren kann.
  4. Prozent (%): Die Prozenteinheit ist der em-Einheit sehr ähnlich, abgesehen von einigen grundlegenden Unterschieden. Zuallererst ist die aktuelle Schriftgröße gleich 100% (d. H. 12pt = 100%). Während Sie die Prozenteinheit verwenden, bleibt Ihr Text für mobile Geräte und für die Zugänglichkeit vollständig skalierbar.
8
Joe Garrett

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

-webkit-Textgrößenanpassung: 120%;

Ich musste es auf 100% ändern und alles lief reibungslos. Sie müssen nicht alle px in em oder %% ändern.

0
me1974

Überprüfen Sie auch, ob für die von Ihnen bearbeiteten Elemente keine "Breite/Höhe" festgelegt ist. In Safari hat die Größenänderung Vorrang vor der Schriftgröße in svg.

0
marebuffi