Некоторый размер шрифта увеличен в Safari (iPhone)

110

Есть ли CSS или другие причины, по которым Safari / iPhone игнорирует некоторые настройки размера шрифта? На моем конкретном веб-сайте Safari на iPhone отображает текст font-size: 13px больше, чем текст font-size: 15px. Может быть, он не поддерживает размер шрифта для некоторых элементов?

css safari mobile-safari font-size Alex
источник

Ответы:

248

В ответе Джо есть несколько передовых практик, но я думаю, что проблема, которую вы описываете, связана с тем, что Mobile Safari автоматически масштабирует текст, если считает, что текст будет отображаться слишком маленьким. Вы можете обойти это с помощью свойства CSS -webkit-text-size-adjust. Вот пример того, как применить это к своему телу, только для iPhone:

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}
Дэвид Канеда
источник
2
Просто столкнулся с этой проблемой. Этот небольшой взлом медиа-экрана работает безупречно. Я собираюсь включить его в свой стартовый файл CSS.
Throttlehead
1
Вау, больно! Сводил меня с ума, я даже попытался изменить имя класса и установить css inline с помощью jQuery, прежде чем нашел это. Спасатель!
Кристоффер Бубах
1
Это очень помогло. Cheers :)
Dead Man
2
Обязательно используйте медиа-запрос. Похоже, что это может затруднить чтение некоторого текста: Остерегайтесь -webkit-text-size-adjust: none
Gemmu
9
Ответ должен быть обновлен на -webkit-text-size-adjust: 100%- это позволяет избежать автоматического обновления, но позволяет изменять масштаб, инициированный пользователем. (источник)
Шон Эркхарт
11

Также убедитесь, что вы устанавливаете начальную настройку масштабирования на 1 в метатеге области просмотра:

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
Johnpolacek
источник
7

Я больше не использую определения пикселей, поскольку они действительно сбивают с толку и не совсем одинаковы для визуальных сервисов.

Познакомьтесь с подразделениями

  1. «Ems» (em): «em» - это масштабируемая единица, которая используется в носителях веб-документов. Em равно текущему размеру шрифта, например, если размер шрифта документа 12pt, 1em равен 12pt. Ems масштабируемы по своей природе, поэтому 2em будет равняться 24pt, .5em будет равняться 6pt и т. Д. Ems становятся все более популярными в веб-документах из-за масштабируемости и их дружественности к мобильным устройствам.
  2. Пиксели (px): пиксели - это единицы фиксированного размера, которые используются в экранных носителях (т. Е. Для чтения на экране компьютера). Один пиксель равен одной точке на экране компьютера (наименьшее деление разрешения вашего экрана). Многие веб-дизайнеры используют пиксельные единицы в веб-документах, чтобы создать идеальное по пикселям представление своего сайта, отображаемого в браузере. Одна из проблем с пиксельным блоком заключается в том, что он не масштабируется вверх для считывателей с ослабленным зрением или вниз, чтобы соответствовать мобильным устройствам.
  3. Очки (pt): Очки традиционно используются в печатных СМИ (все, что должно быть напечатано на бумаге и т. Д.). Одна точка равна 1/72 дюйма. Точки очень похожи на пиксели, поскольку они имеют фиксированный размер и не могут масштабироваться.
  4. Процент (%): Единица процента очень похожа на единицу «em», за исключением нескольких фундаментальных отличий. Прежде всего, текущий размер шрифта равен 100% (т.е. 12pt = 100%). При использовании процентной единицы ваш текст остается полностью масштабируемым для мобильных устройств и для доступности.

источник
4
Ответ состоит в том, чтобы использовать 1 предопределенную единицу для текста (т.е. 12pt), а затем для всех последующих определений css использовать font-size: 90%; или размер шрифта: 110%; и т.д. и т.д. Это более доступно для всех поддерживаемых вами устройств.
1
Вы забыли самое главное: REM (ссылка EM). Вы можете использовать его во всем документе, и он остается неизменным (не каскадным).
Эндрю Свифт
3
Этот ответ не имеет отношения к делу и никак не отвечает на вопрос. Вопрос заключался в том, чтобы тексты одного размера отображались по-разному, а не в том, какие единицы использовать. Проблема действительно остается, независимо от того, какие единицы используются.
Rauli Rajande
0

У меня была такая же проблема, оказывается, в исходном CSS была такая строка:

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

Пришлось поменять на 100%, и все прошло гладко. Не нужно менять все пиксели на em или %%.

мне 1974
источник
Дизайнер в любом случае должен использовать em для размеров шрифта.
Ник Тернер
2
... кроме тега body css, где лучше всего использовать размер px.
Мэтт Паркинс
0

Также проверьте, не установлена ​​ли у вас «ширина / высота» для элементов, которыми вы манипулируете, Safari дает приоритет размера над размером шрифта в svg, Chrome и FF, похоже, по крайней мере, в настоящее время.

маребуффи
источник