Размер шрифта, отображающий несоответствия на iPhone

Ответ 1

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

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

Использование значения "100%" вместо "none" позволяет всем другим браузерам на основе 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%;

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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