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

110

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

— 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%- это позволяет избежать автоматического обновления, но позволяет изменять масштаб, инициированный пользователем. (источник)

— Шон Эркхарт

14

Используйте 100% вместо None.

normalize.css включает это

— user3276706
источник

11

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

<meta name="viewport" content="width=device-width; initial-scale=1.0;" />

— Johnpolacek
источник

7

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

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

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

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