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

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

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

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

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

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

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

or

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

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

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).

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

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

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

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

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

РЕДАКТИРОВАТЬ: Лучшее решение, предоставленное user612626 - использовать 100% вместо none.

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

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

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

Для меня другое решение не сработало. Как ни странно, единственным решением, которое я нашел, было увеличение ширины контейнера абзаца на 2 пикселя (путем уменьшения левого и правого отступов на 1 пиксель).

Вот чего я пытался добиться: я хотел, чтобы мой абзац соответствовал ширине экрана (375 пикселей), чтобы он не пропускал строку и не оставлял пустого пространства вокруг текст.

Я пробовал все комбинации с размером шрифта от 1.12em до 1.20em, это либо:

1. оставьте важное свободное пространство вокруг текста
2. пропустить одну строку

... но никогда не ожидал идеального результата, даже почти приличного. Но когда я уменьшил отступ влево и вправо на 1 пиксель, проблема исчезла.

Я использовал -webkit-text-size-adjust: 100%; и другие решения, но мне помогло приведенное выше объяснение. Вы можете видеть на изображении ниже (текст размыт, но вы понимаете), что теперь все пространство используется и работает по назначению. Итак, если вы в отчаянии, попробуйте это решение, даже если это не идеальное решение.