Chrome na Androida zmienia rozmiar czcionki

Question 1

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ć?

Question 2

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

Question 3

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”.

Question 4

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

Question 5

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

Question 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.

Question 7

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).

Question 8

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

Answer 1

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ć?

android html css google-chrome font-size Sprax
źródło

1

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

Junuxx

Answer 2

1

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

Junuxx

Answer 3

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

Answer 4

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

Answer 5

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,

Answer 6

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

James McDonnell,

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

17

Nie wyłącza to jednak wzmocnienia czcionek.

Ed Hinchliffe

Answer 12

1

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

Dizzley

Answer 13

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,

Answer 14

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

Jennifer Michelle

Answer 15

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

Answer 16

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

Stepan Yakovenko

Answer 17

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

jpp

Answer 18

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

Radenko Zec

Answer 19

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

Answer 20

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

Sabrina Leggett

Answer 21

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

Answer 22

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

Answer 23

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

Answer 24

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.

Answer 25

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

Answer 26

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

Answer 27

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

Chrome na Androida zmienia rozmiar czcionki

Odpowiedzi: