Najwyraźniej, gdy akapit tekstu osiągnie określoną długość, chrome na Androida decyduje się zmienić rozmiar tekstu i zwiększyć jego rozmiar (powodując wszelkiego rodzaju przyjemność). Teraz mam stronę, na której około połowa tagów p odpowiada rozmiarowi, który ustawiłem, a druga połowa zmienia się zgodnie z oczekiwaniami - najwyraźniej w zależności od długości akapitu.Chrome na Androida zmienia rozmiar czcionki
Jak do licha to naprawię?
Nazywa się to "zwiększaniem czcionki" i jest opisane szczegółowo w tej publikacji: WebKit bug. Obecnie nie można go wyłączyć.
Znalazłem rozwiązanie dla moich stron: nadaj elementowi rodzica szerokość i wysokość! Czcionka nie wychodzi poza te granice, więc pozostanie mała (er).
Dodaj max-height: 999999px; do elementu, który ma zapobiegać podnoszeniu czcionek lub jego rodzicowi.
Działa ... jak to możliwe! – Laurent
Android Chrome stosuje zwiększanie czcionek tylko do elementów o dynamicznej wysokości. Gdy tylko podasz wysokość lub wysokość maks., Zwiększenie liczby czcionek nie zostanie zastosowane. Ustawienie maksymalnej wysokości na dużą liczbę jest proste i nie powinno powodować żadnych skutków ubocznych. – moeffju
To tylko ostrzeżenie. To rozwiązało problem, który miałem z czcionkami Chrome na Androidzie, nie grając ładnie. ** Jednak ** zepsuł on widok na iPada strony w określonych wersjach ios. –
Dołącz następujący <meta> tag w dokumencie <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
To będzie poprawnie nawiązać ramce widokowej, a tym samym wyeliminować potrzebę "FontBoosting".
Jest to zdecydowanie preferowane rozwiązanie.Jeśli zależy Ci na tym, jak rzeczy wyglądają na urządzeniach mobilnych, przejmuj własność ekranu! –
Nie wyłącza to jednak zwiększania czcionek. –
To z pewnością poprawia niechciane skalowanie i zamierzam go użyć w przyszłości. – Dizzley
Po kilku testach ta zasada pomogła mi. Musi zostać dodany do elementu zawierającego tekst wzmocniony lub jego rodzica 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;
}
Być może wartości szerokości i wysokości muszą być skorygowane zgodnie z potrzebami.
Umieść to w swoim reset. html * {max-height:1000000px;}
powodował problemy ze mną na lepkie stopki, musiał zrobić korpus html * zamiast –
Istnieje obecnie własność CSS można ustawić, aby kontrolować to:
-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
dostosowanie rozmiaru tekstu: brak pracował dla mnie na ostatnim chrome android. –
Czy masz jakiś przykład? A także, która wersja Androida i Chrome? – Junuxx