Niektóre rozmiary czcionek są renderowane jako większe w Safari (iPhone)

110

Czy istnieją CSS lub inne powody, dla których Safari / iPhone ignoruje niektóre ustawienia rozmiaru czcionki? Na mojej konkretnej stronie Safari na iPhonie renderuje rozmiar czcionki: tekst o 13 pikseli większy niż rozmiar czcionki: tekst o rozmiarze 15 pikseli. Czy może nie obsługuje rozmiaru czcionki w niektórych elementach?

css safari mobile-safari font-size Alex
źródło

Odpowiedzi:

248

Odpowiedź Joe zawiera kilka dobrych praktyk, ale myślę, że problem, który opisujesz, koncentruje się wokół faktu, że Mobile Safari automatycznie skaluje tekst, jeśli uważa, że ​​tekst będzie renderowany za mały. Możesz obejść ten problem za pomocą właściwości CSS -webkit-text-size-adjust. Oto próbka, jak zastosować to do ciała, tylko w przypadku iPhone'a:

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}
David Kaneda
źródło
2
Właśnie napotkałem ten problem. Ten mały hack do ekranu multimediów działa bez zarzutu. Zacznę włączać go do mojego pliku startowego CSS.
Throttlehead
1
Wow, chory! Doprowadza mnie do szaleństwa, próbowałem nawet zmienić nazwę klasy i ustawić css w jQuery, zanim to znalazłem. Ratownik!
Christoffer Bubach,
1
To bardzo pomogło. Pozdrawiam :)
Dead Man
2
Upewnij się, że używasz zapytania o media. Wydaje się, że to może jakiś tekst trudny do odczytania: Strzeż -webkit-text-size-adjust: none
Gemmu
9
Odpowiedź powinna zostać zaktualizowana do -webkit-text-size-adjust: 100%- pozwala to uniknąć automatycznej aktualizacji, ale umożliwia powiększenie inicjowane przez użytkownika. (źródło)
Shawn Erquhart
11

Upewnij się również, że w metatagu rzutni ustawiasz początkowe ustawienie powiększenia na 1:

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
johnpolacek
źródło
7

Nie używam już definicji pikseli, ponieważ są one naprawdę mylące i nie są dokładnie takie same w usługach wizualnych.

Poznaj jednostki

  1. „Ems” (em): „em” to skalowalna jednostka używana w dokumentach internetowych. Em jest równy aktualnemu rozmiarowi czcionki, na przykład jeśli rozmiar czcionki dokumentu to 12 punktów, 1 em jest równe 12 punktom. Ems są z natury skalowalne, więc 2em odpowiadałoby 24 punktom, 0,5em odpowiadałoby 6 punktom itd. Ems stają się coraz bardziej popularne w dokumentach internetowych ze względu na skalowalność i przyjazność dla urządzeń mobilnych.
  2. Piksele (piksele): Piksele to jednostki o stałym rozmiarze, które są używane w mediach wyświetlanych na ekranie (tj. Do odczytu na ekranie komputera). Jeden piksel to jedna kropka na ekranie komputera (najmniejszy podział rozdzielczości ekranu). Wielu projektantów stron internetowych używa jednostek pikseli w dokumentach internetowych, aby stworzyć perfekcyjną reprezentację ich witryny, gdy jest ona renderowana w przeglądarce. Jednym z problemów związanych z jednostką pikseli jest to, że nie skaluje się ona w górę dla czytelników niedowidzących ani w dół, aby dopasować ją do urządzeń mobilnych.
  3. Punkty (pt): Punkty są tradycyjnie używane w mediach drukowanych (wszystko, co ma być wydrukowane na papierze itp.). Jeden punkt to 1/72 cala. Punkty są podobne do pikseli, ponieważ są jednostkami o stałym rozmiarze i nie można ich skalować.
  4. Procent (%): Jednostka procentowa jest podobna do jednostki „em”, z wyjątkiem kilku podstawowych różnic. Przede wszystkim obecny rozmiar czcionki wynosi 100% (tj. 12 pkt = 100%). Używając jednostki procentowej, tekst pozostaje w pełni skalowalny pod kątem urządzeń mobilnych i ułatwień dostępu.

źródło
4
Odpowiedzią jest użycie 1 predefiniowanej jednostki dla tekstu (tj. 12pt), a następnie dla wszystkich kolejnych definicji CSS użyj rozmiaru czcionki: 90%; lub rozmiar czcionki: 110%; itp. itd. Jest to łatwiej dostępne dla wszystkich obsługiwanych urządzeń.
1
Zapomniałeś o najważniejszym: REM (odniesienie do EM). Możesz go używać w całym dokumencie i pozostaje taki sam (nie jest kaskadowy).
Andrew Swift
3
Ta odpowiedź nie jest istotna i w żaden sposób nie odpowiada na pytanie. Pytanie dotyczyło tekstów o tej samej wielkości renderujących się inaczej, a nie tego, jakich jednostek użyć. Problem naprawdę pozostaje bez względu na używane jednostki.
Rauli Rajande
0

Miałem ten sam problem, okazuje się, że w oryginalnym CSS była taka linia:

-webkit-text-size-Adjust: 120%;

Musiałem to zmienić na 100% i wszystko poszło gładko. Nie ma potrzeby zmieniania wszystkich pikseli na em lub %%.

me1974
źródło
Projektant i tak powinien używać em dla rozmiarów czcionek.
Nick Turner,
2
... z wyjątkiem css tagu body, gdzie rozmiar w pikselach jest najlepszy.
Matt Parkins
0

Sprawdź również, czy nie masz ustawionej "szerokość / wysokość" dla elementów, którymi manipulujesz, Safari daje pierwszeństwo rozmiarowi nad rozmiarem czcionki w svg, Chrome i FF, jak się wydaje, przynajmniej obecnie nie.

marebuffi
źródło