Некоторые размеры шрифта, сделанные больше на Safari (iPhone)

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 5

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

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

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