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

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?

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;
  }
}

Użyj 100% zamiast Brak.

normalize.css obejmuje to

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;" />

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.

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

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.