Размер шрифта увеличен в Safari (iPhone)

Question

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

Answer 1

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

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}

Answer 2

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

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

Answer 3

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

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

Answer 4

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

Познакомьтесь с единицами

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%).При использовании процентной единицы ваш текст остается полностью масштабируемым для мобильных устройств и для обеспечения доступности.

Answer 5

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

Answer 6

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

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

Мне пришлось изменить его на100%, и все было гладко.Нет необходимости менять все px на em или %%.