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

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