Chrome unter Android ändert die Schriftgröße

82

Sobald ein Textabschnitt eine bestimmte Länge erreicht hat, beschließt Google Chrome unter Android, die Größe des Textes zu ändern und ihn zu vergrößern (was jede Menge Spaß macht). Jetzt habe ich eine Website, auf der ungefähr die Hälfte der pTags der von mir festgelegten Größe folgt und die andere Hälfte sich nach Belieben ändert - anscheinend abhängig von der Länge des Absatzes.

Wie um alles in der Welt kann ich das beheben?

Sprax
quelle
1
Hast du ein beispiel Welche Android- und Chrome-Version?
Junuxx

Antworten:

91

Fügen Sie max-height: 999999px;dem Element, das Sie verbessern möchten, oder dem übergeordneten Element hinzu.

Moeffju
quelle
13
Android Chrome wendet die Schriftverstärkung nur auf Elemente mit dynamischer Höhe an. Sobald Sie eine Höhe oder maximale Höhe angeben, wird die Schriftverstärkung nicht angewendet. Das Einstellen der maximalen Höhe auf eine große Anzahl ist einfach und sollte keine Nebenwirkungen haben.
Moeffju
1
Nur eine Warnung dafür. Dies löste das Problem, das ich mit Chrome-Schriftarten auf Android hatte, die nicht gut spielten. Allerdings brach er den ipad Blick auf der Website auf bestimmte Versionen von ios.
James McDonnell
Außerdem verursachte es einige Probleme auf dem iPad für CSS3-Übergänge.
James McDonnell
4
Wenn Sie dies verwenden, wird das Layout vieler Elemente in Safari (5.1.7) erheblich beeinträchtigt, auch wenn Sie zunächst keine maximale Höhe oder definierte Höhe verwenden. Einige Websites waren völlig unbrauchbar, alle Strukturelemente divwaren unbeholfen oben auf der Seite zusammengeklappt. Decken Sie Ihre Site nicht mit einer Definition für die maximale Höhe ab! Nur bei Bedarf verwenden und gründlich testen.
Radley Sustaire
2
Welpe ... Gerade als ich dachte, ich hätte alles gesehen ... Noch eine verrückte Panne mit einer anderen verrückten Lösung. FWIW Ich sehe keine Probleme in Safari und hatte min-height: 1pxleider keine Auswirkungen. max-height: 999999pxmacht den Trick aber. Mein Fall war ein sehr langer Inhalt, der während der Ein- / Ausfahrt der Route überging. Das Boosten der Schriftarten erfolgte entweder während oder kurz nach dem Übergang, nicht sicher, welche, aber es verursachte eine sehr merkliche Verschiebung.
Chase
59

Fügen Sie das folgende <meta>Tag in das Dokument ein <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Dadurch wird der Ansichtsrahmen korrekt festgelegt, und "FontBoosting" ist nicht mehr erforderlich.

Joe DeRose
quelle
6
Dies ist definitiv die bevorzugte Lösung. Wenn Sie sich dafür interessieren, wie die Dinge auf Mobilgeräten aussehen, übernehmen Sie die Verantwortung für Ihr Ansichtsfenster!
Paul Irish
15
Dies deaktiviert jedoch nicht das Boosten von Schriftarten.
Ed Hinchliffe
1
Es korrigiert sicherlich unerwünschte Skalierungen und ich werde es in Zukunft verwenden.
Dizzley
5
Als Hinweis habe ich <meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">und ich bekomme immer noch Chromes schreckliche Skalierung
Sam
Das ist besser, weil die Schrift lesbar ist. Es behält die Proportionen bei und vergrößert die Lesbarkeit. Perfekt für mich.
Jennifer Michelle
23

Es gibt jetzt eine CSS-Eigenschaft, die Sie festlegen können, um dies zu steuern:

-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;

Siehe https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

Gareth
quelle
Textgrößenanpassung: Keiner hat bei mir auf dem neuesten Android-Chrom funktioniert.
Stepan Yakovenko
Dies ist die bevorzugte Lösung, wenn Sie ein als Web-App bereitgestelltes Gas verwenden.
Jpp
Das funktioniert bei mir nicht, aber bei maximaler Höhe.
Radenko Zec
15

Setzen Sie dies in Ihren Reset. html * {max-height:1000000px;}

Ed Hinchliffe
quelle
verursachte Probleme mit mir für klebrige Fußzeile, musste stattdessen HTML-Körper * tun
Sabrina Leggett
Dies ist etwas zu aggressiv, es sei denn, Sie haben tatsächlich ein Problem mit vielen unvorhersehbaren Elementen. Andernfalls ist es besser, nur auf die Problemelemente abzuzielen.
Chase
1
@Chase - in meinem Fall waren sie unvorhersehbare (dynamische) Elemente, daher mussten wir einen *Ansatz verwenden. Trotzdem würde ich behaupten, dass dies eines dieser obskuren Dinge ist, die Sie wahrscheinlich vergessen würden und die in Zukunft Probleme verursachen könnten. Aus Gründen der Wartbarkeit hätte ich es wahrscheinlich belassen, *selbst wenn es zu diesem Zeitpunkt nur eines gewesen wäre wenige Elemente.
Ed Hinchliffe
Unmittelbar nachdem ich diesen Thread gefunden und kommentiert hatte, sah ich zusätzliche Probleme, von denen ich vermutete, dass sie mit der Erhöhung der Schrift zusammenhängen. Also, sicher genug (zumindest für den Moment) gibt es eine * max-height...in meinem Code LOL
Chase
So seltsam, dass es bei mir funktioniert hat.
Einfacher Code
6

Nach einigen Tests hat mir diese Regel geholfen. Muss je nach div / table-Struktur entweder zu dem Element hinzugefügt werden, das verstärkten Text enthält, oder zu dem übergeordneten Element.

element or parent element { 
    /* prevent font boosting on mobile devices */
    width: 100%;
    height: auto;
    min-height: 1px;
    max-height: 999999px;
}

Möglicherweise müssen die Werte für Breite und Höhe entsprechend Ihren Anforderungen korrigiert werden.

Metamagikum
quelle
2

Ich habe eine Lösung für meine Seiten gefunden: Geben Sie dem übergeordneten Element eine Breite und Höhe! Die Schriftart überschreitet diese Grenzen nicht und bleibt daher klein (er).

Randy Vroegop
quelle
1

Dies wird als "Font Boosting" bezeichnet und in diesem WebKit-Fehler ausführlich beschrieben . Es gibt derzeit keine Möglichkeit, es zu deaktivieren.

Boris Smus
quelle
Sieht so aus, als würde es tatsächlich die Schrift verbessern, aber es kann verhindert werden, indem max-height: 999999px@moeffju beschrieben wird.
Chase