Несоответствие размера шрифта на iPhone - PullRequest
Новая
       42

Несоответствие размера шрифта на iPhone

49 голосов
/ 30 марта 2010

Я тестирую свой веб-сайт и отлично работаю на всех браузерах, кроме браузера iphone (я думаю, это мобильный Safari?), Который отображает фрагмент текста с более крупным шрифтом, чем остальные. Я проверил CSS вручную и использовал firebug на странице, и я могу подтвердить, что я установил одинаковый размер для всех из них. Как мне это исправить?

Ответы [ 5 ]

165 голосов
/ 11 февраля 2011

Чтобы немного улучшить идею Лукаша, попробуйте использовать следующее правило в вашем CSS: 

body {
    -webkit-text-size-adjust: 100%;
}

Использование значения «100%» вместо «нет» позволяет всем другим браузерам на основе Webkit изменять размер текста при использовании функции масштабирования, сохраняя при этом исходный размер шрифта.

Эта проблема возникает только в современных браузерах, таких как Safari, Opera с устройством iPhone. Решение

Добавьте этот стиль с помощью -webkit-text-size-Adjust: 100%; или -webkit-text-size-Adjust: нет ; с обязательным классом работает нормально. Пример: Я хочу, чтобы условие применялось только тогда, когда запрос приходит с мобильного телефона. Поэтому я добавил полный путь навигации, который полностью соответствует моим требованиям. 

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame 
{
    -webkit-text-size-adjust: none;
}

или 

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame {
-webkit-text-size-adjust: 100%;

} оба будут работать нормально. Нет необходимости применять стили для всего тела

22 голосов
/ 31 марта 2010

Mobile Safari пытается адаптировать контент, чтобы он по умолчанию читался на экране - для других браузеров он имеет стили по умолчанию.

Я не знаю точных правил - но когда дело доходит до размеров шрифта, похоже, это работает так:

  • Текст внутри абзаца, элемента списка или другого элемента «текст»: Применение стиля автора без адаптации.

  • Текст внутри DIV или другого неспецифического элемента: Считать «простым текстом» и «адаптировать» размер в соответствии с правилами Mobile Safari.

Итак, краткий ответ: оберните текст в абзац и примените к нему правило размера шрифта.

Вот быстрый и грязный пример: 

<!-- Recommended: Put this in an external stylesheet -->
<style type="text/css">
    p { font-size:10px; }
</style>

<div class="appro_body">
  <p>SAN BENEDETTO - Si è ufficialmente aperta la campagna elettorale per le 
    comunali di San Benedetto del Tronto 2011. Le elezioni regionali, oramai
    dietro le spalle, sembra siano servite più che per organizzare il 
    territorio in crisi, per muovere le pedine in vista delle elezioni a 
    Sindaco.
    ...
    <a href="http://www.ilsegnale.it/it/news/approfondimento/1602/?tpl=502">Leggi tutto...</a>
  </p>
</div>

(очевидно, вы должны переместить правило font-size в файл CSS).

13 голосов
/ 02 апреля 2013

Я исправил эту же проблему с: 

<meta name="viewport" content="width=device-width">

С HTML5Boilerplate в настоящее время здесь

12 голосов
/ 14 ноября 2010

Поместите такое правило в свой CSS, и ваша проблема исчезнет: 

body {
    -webkit-text-size-adjust: none;
}

EDIT: Лучшим решением , предоставленным user612626 , является использование 100% вместо none.

4 голосов
/ 01 октября 2010

Дайте тело font-size:100%, затем используйте метод em, чтобы задать размер шрифта для каждого элемента на вашем сайте.

Это сделает размер шрифта 100% размера шрифта по умолчанию соответствующим браузером. Например, браузер iPhone Safari имеет 12px = 1em (конечно, вы должны проверить размер шрифта по умолчанию локально). Затем, если вы хотите иметь размер шрифта 10px, просто разделите его на 12, то есть "0.83em"

Надеюсь, вы понимаете, также ищите "css em unit", вы получите лучшее понимание.

...