Chrome su Android ridimensiona il carattere

85

Apparentemente una volta che un paragrafo di testo raggiunge una certa lunghezza, Google Chrome su Android decide di ridimensionare il testo e ingrandirlo (provocando ogni tipo di divertimento). Ora ho un sito Web in cui circa la metà dei ptag segue la dimensione che ho impostato e l'altra metà cambia a piacere - apparentemente a seconda della lunghezza del paragrafo.

Come diavolo posso risolvere questo problema?

— Sprax
fonte

1

Hai un esempio? Inoltre, quale versione di Android e Chrome?

— Junuxx

94

Aggiungi max-height: 999999px;all'elemento su cui vuoi impedire l'aumento del carattere o al suo genitore.

— moeffju
fonte

13

Android Chrome applica il potenziamento dei caratteri solo agli elementi con altezza dinamica. Non appena si specifica un'altezza o un'altezza massima, il potenziamento del carattere non viene applicato. Impostare l'altezza massima su un numero elevato è semplice e non dovrebbe avere effetti collaterali.

— moeffju

1

Solo un avvertimento per questo. Questo ha risolto il problema che avevo con i caratteri Chrome su Android che non funzionavano bene. Tuttavia ha rotto la visualizzazione ipad del sito su versioni specifiche di ios.

— James McDonnell

Così come ha causato alcuni problemi su ipad per le transizioni css3.

— James McDonnell

4

L'utilizzo di questo interrompe in modo significativo il layout di molti elementi in Safari (5.1.7), anche se non si utilizza l'altezza massima o le altezze definite per cominciare. Alcuni siti erano completamente inutilizzabili, tutti gli divelementi strutturali erano crollati goffamente nella parte superiore della pagina. Non "coprire" il tuo sito con una definizione di altezza massima! Utilizzare solo dove necessario e testare accuratamente.

— Radley Sustaire

2

Cucciolo ... Proprio quando pensavo di aver visto tutto ... Un altro pazzo glitch con un'altra pazza soluzione. FWIW Non vedo alcun problema in Safari e min-height: 1pxsfortunatamente non ha avuto alcun effetto. max-height: 999999pxfa il trucco però. Il mio caso riguardava la transizione di contenuti molto lunghi durante l'entrata / uscita del percorso. L'aumento dei caratteri è avvenuto durante o subito dopo la transizione, non sono sicuro di quale, ma ha causato un cambiamento molto evidente.

— Chase

60

Includere il seguente <meta>tag nel documento <head>:

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

Ciò stabilirà correttamente il frame della visualizzazione e quindi eliminerà la necessità di "FontBoosting".

— Joe DeRose
fonte

6

Questa è sicuramente la soluzione preferita. Se ti interessa come appaiono le cose sui dispositivi mobili, prendi possesso della tua visualizzazione!

— Paul Irish il

17

Tuttavia, questo non disabilita il potenziamento dei caratteri.

— Ed Hinchliffe

1

Corregge sicuramente il ridimensionamento indesiderato e lo userò in futuro.

— Dizzley

5

Come nota, ho <meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">e sto ancora ottenendo un ridimensionamento terribile di Chromes

— Sam

È meglio perché il carattere è leggibile. Mantiene le proporzioni aumentando le dimensioni per la leggibilità. Perfetto per me.

— Jennifer Michelle

23

Ora c'è una proprietà CSS che puoi impostare per controllare questo:

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

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

— Gareth
fonte

text-size-Adjust: nessuno ha funzionato per me sull'ultimo Android Chrome.

— Stepan Yakovenko

Questa è la soluzione preferita se si utilizza un gas distribuito come app web.

— jpp

15

Mettilo nel tuo reset. html * {max-height:1000000px;}

— Ed Hinchliffe
fonte

stava causando problemi con me per il piè di pagina appiccicoso, dovevo invece fare html body *

— Sabrina Leggett

Questo è un po 'troppo aggressivo, a meno che tu non stia effettivamente riscontrando un problema in molti elementi imprevedibili. Altrimenti sarebbe meglio indirizzare solo gli elementi problematici.

— Chase

1

@Chase - nel mio caso erano elementi (dinamici) imprevedibili, quindi abbiamo dovuto usare un *approccio. Detto questo, direi che questa è una di quelle cose oscure che probabilmente dimenticheresti e che potrebbero causare problemi in futuro, quindi per la manutenibilità probabilmente l'avrei lasciata *anche se al momento era solo una / a pochi elementi.

— Ed Hinchliffe

Subito dopo aver trovato questo thread e aver commentato, ho iniziato a vedere ulteriori problemi che sospettavo fossero correlati all'amplificazione dei caratteri. Quindi, abbastanza sicuro (almeno per ora) c'è un * max-height...LOL nel mio codice

— Chase

6

Dopo alcuni test questa regola mi ha aiutato. Deve essere aggiunto all'elemento contenente testo potenziato o al suo genitore a seconda della struttura div / tabella.

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

Forse i valori di larghezza e altezza devono essere corretti in base alle proprie esigenze.

— metamagikum
fonte

2

Ho trovato una soluzione per le mie pagine: dai all'elemento genitore larghezza e altezza! Il carattere non uscirà da quei bordi, quindi rimarrà piccolo (er).

— Randy Vroegop
fonte

1

Questo si chiama "potenziamento dei caratteri" ed è descritto in dettaglio in questo bug di WebKit . Al momento non è possibile disattivarlo.

— Boris Smus
fonte

Sembra che stia effettivamente potenziando i caratteri, ma può essere prevenuto impostando max-height: 999999pxcome descritto da @moeffju.

— Chase