Chrome na Androida zmienia rozmiar czcionki

84

Najwyraźniej, gdy akapit tekstu osiągnie określoną długość, Google Chrome na Androida decyduje się zmienić rozmiar tekstu i powiększyć go (powodując wszelkiego rodzaju zabawę). Teraz mam stronę internetową, na której około połowa p-tagów jest zgodna z ustawionym przeze mnie rozmiarem, a druga połowa zmienia się tak, jak chcą - najwyraźniej w zależności od długości akapitu.

Jak mam to naprawić?

— Sprax
źródło

1

Masz przykład? Poza tym, która wersja Androida i Chrome?

— Junuxx

93

Dodaj max-height: 999999px;do elementu, w którym chcesz zapobiec wzmocnieniu czcionki, lub jego elementu nadrzędnego.

— moeffju
źródło

13

Android Chrome stosuje wzmocnienie czcionek tylko do elementów o dynamicznej wysokości. Po określeniu wysokości lub maksymalnej wysokości wzmocnienie czcionki nie zostanie zastosowane. Ustawienie maksymalnej wysokości na dużą liczbę jest proste i nie powinno mieć żadnych skutków ubocznych.

— moeffju

1

Tylko ostrzeżenie. To rozwiązało problem, który miałem z czcionkami Chrome na Androida, które nie grały dobrze. Jednak zepsuło to widok strony na iPadzie w określonych wersjach iOS.

— James McDonnell,

Oprócz tego spowodowało to pewne problemy na iPadzie w przypadku przejść CSS3.

— James McDonnell,

4

Użycie tego znacznie psuje układ wielu elementów w Safari (5.1.7), nawet jeśli na początku nie używasz maksymalnej wysokości lub zdefiniowanych wysokości. Kilka witryn było całkowicie bezużytecznych, wszystkie divelementy strukturalne były niezgrabnie zwinięte na górę strony. Nie zakrywaj swojej witryny definicją maksymalnej wysokości! Używaj tylko w razie potrzeby i dokładnie przetestuj.

— Radley Sustaire

2

Whelp ... Właśnie wtedy, gdy myślałem, że widziałem to wszystko ... Kolejna szalona usterka z kolejną szaloną poprawką. FWIW Nie widzę żadnych problemów w Safari i min-height: 1pxniestety nie przyniosło to żadnego efektu. max-height: 999999pxzałatwia sprawę. Mój przypadek polegał na bardzo długim przenoszeniu treści podczas wjazdu / wyjazdu z trasy. Podbijanie czcionek miało miejsce podczas lub tuż po przejściu, nie jestem pewien, które, ale spowodowało bardzo zauważalną zmianę.

— Chase

60

Uwzględnij <meta>w dokumencie następujący tag <head>:

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

Pozwoli to poprawnie ustawić ramkę widoku, a tym samym wyeliminuje potrzebę „FontBoosting”.

— Joe DeRose
źródło

6

To zdecydowanie preferowane rozwiązanie. Jeśli zależy Ci na tym, jak rzeczy wyglądają na urządzeniach mobilnych, przejmij na własność swój widoczny obszar!

— Paul Irish

17

Nie wyłącza to jednak wzmocnienia czcionek.

— Ed Hinchliffe

1

Z pewnością koryguje niechciane skalowanie i zamierzam go używać w przyszłości.

— Dizzley

5

Uwaga: mam <meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">i nadal otrzymuję okropne skalowanie Chromów

— Sam,

Tak jest lepiej, ponieważ czcionka jest czytelna. Zachowuje proporcje, jednocześnie zwiększając rozmiar dla czytelności. Idealne dla mnie.

— Jennifer Michelle

23

Istnieje teraz właściwość CSS, którą możesz ustawić, aby to kontrolować:

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

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

— Gareth
źródło

dostosowywanie rozmiaru tekstu: żaden nie działał dla mnie na najnowszym Chrome dla Androida.

— Stepan Yakovenko

Jest to preferowane rozwiązanie, jeśli używasz gazu wdrożonego jako aplikacja internetowa.

— jpp

To nie działa dla mnie, ale max-height działa.

— Radenko Zec

15

Umieść to w swoim resecie. html * {max-height:1000000px;}

— Ed Hinchliffe
źródło

powodował u mnie problemy z lepką stopką, zamiast tego musiałem wykonać treść html *

— Sabrina Leggett

Jest to trochę zbyt agresywne, chyba że faktycznie masz problem z wieloma nieprzewidywalnymi elementami. W przeciwnym razie lepiej byłoby skupić się tylko na problematycznych elementach.

— Chase

1

@Chase - w moim przypadku były to elementy nieprzewidywalne (dynamiczne), więc musieliśmy zastosować *podejście. To powiedziawszy, argumentowałbym, że jest to jedna z tych niejasnych rzeczy, o których prawdopodobnie zapomnisz i które mogą powodować problemy w przyszłości, więc ze względu na łatwość konserwacji prawdopodobnie zostawiłbym to, *nawet jeśli w tym czasie był to tylko jeden / a kilka elementów.

— Ed Hinchliffe

Zaraz po tym, jak znalazłem ten wątek i skomentowałem, zacząłem dostrzegać dodatkowe problemy, które, jak podejrzewałem, były związane z ulepszaniem czcionek. Tak więc, na pewno (przynajmniej na razie) * max-height...w moim kodzie LOL

— Chase

6

Po kilku testach ta zasada mi pomogła. Należy dodać do elementu zawierającego tekst wzmocniony lub do elementu nadrzędnego w zależności od struktury div / table.

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

Może wartości szerokości i wysokości należy dostosować do własnych potrzeb.

— metamagikum
źródło

2

Znalazłem rozwiązanie dla moich stron: nadaj elementowi nadrzędnemu szerokość i wysokość! Czcionka nie wyjdzie poza te granice, więc pozostanie mała (er).

— Randy Vroegop
źródło

1

Nazywa się to „wzmocnieniem czcionek” i zostało szczegółowo opisane w tym błędzie WebKit . Obecnie nie ma sposobu, aby go wyłączyć.

— Boris Smus
źródło

Wygląda na to, że jest to rzeczywiście wzmocnienie czcionki, ale można temu zapobiec, ustawiając max-height: 999999px zgodnie z opisem @moeffju.

— Ścigaj